首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带有keyof的Typescript函数不接受对象键值作为有效的keyof

。首先,keyof是Typescript中的一个操作符,用于获取对象类型的所有键的联合类型。它可以在泛型约束和类型定义中使用。

当我们定义一个使用keyof的Typescript函数时,它期望keyof操作符返回的是对象类型的键的联合类型,而不是对象实际的键值。

下面是一个示例,展示了如何使用keyof和泛型来定义一个函数,该函数接受一个对象和一个键的参数,并返回该对象对应键的值:

代码语言:txt
复制
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

在这个示例中,我们使用了泛型T来表示对象的类型,使用了泛型K来表示对象的键的类型,并通过extends keyof T来约束K必须是T的键的类型。

这个函数使用了索引访问操作符[]来获取对象的键对应的值,并通过返回类型T[K]来指定返回值的类型。

使用示例:

代码语言:txt
复制
const user = {
  name: 'Alice',
  age: 30,
};

const name = getProperty(user, 'name'); // 类型推断为string
const age = getProperty(user, 'age'); // 类型推断为number
const invalidKey = getProperty(user, 'invalid'); // 编译错误,'invalid'不是user对象的有效键

这里推荐使用腾讯云的云开发(Tencent Cloud Base)产品,它是一个一体化的云原生开发平台,提供了包括云函数、云数据库、云存储、云托管等服务,适用于前后端一体化的开发场景。相关产品介绍和文档可以在腾讯云的官方网站上找到:腾讯云开发产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深入理解 TypeScript Keyof 运算符,让你代码更安全、更灵活!

这种运算符可以用于如集合和类等对象,通过键值对来存储和检索数据。使用 map 实例对象 object.keys() 方法,我们可以获取存储在内存中键。...当我们为变量赋值时,TypeScript 会确保赋值值是 DemoClass 有效属性之一。...[key]; } 上面的函数使用了泛型来定义一个对象属性类型。...例如: 动态访问对象属性 : 使用 keyof 可以确保我们访问属性在对象上是有效,从而避免运行时错误。...类型安全配置对象: 当我们处理配置对象时,可以使用 keyof 来确保配置项名称是预定义有效值。 通过在对象类型上使用 keyof 运算符,我们可以创建联合类型,从而确保属性访问类型安全性。

15210
  • TS 进阶 - 类型工具

    # 索引类型查询 keyof,可以将对象所有键转换为对应字面量类型,然后在组合成联合类型。...Foo; // 'bar' | 2022 除了应用于已知对象类型结构上之外,可以直接 keyof any 来产生一个联合类型——由所有可用作对象键值类型组成:string | number |...可以使用 keyof 一次性获取这个对象所有的键字面量类型: interface Foo { propA: number; propB: boolean; propC: string; }...type Stringify = { [K in keyof T]: string }; 这个工具类型接受一个对象类型,使用 keyof 获得对象类型键名组成字面量联合类型,然后通过映射类型...,在它返回值中,不在使用 boolean 作为类型标注,而是使用 input is string: input 是函数某个参数 is string 即 is 预期类型,如果这个函数成功返回 ture

    86720

    TypeScript另一面:类型编程

    作者:林不渡 https://juejin.cn/post/6885672896128090125 前言 作为前端开发趋势之一,TypeScript 正在越来越普及,很多人像我一样写了 TS 后再也回不去了...如果接收一个数字,返回这个数字 n 倍。 如果接收一个对象,返回键值被更改过对象(键名不变)。 上面这些场景有一个共同点,即函数返回值与入参是同一类型...." | "b" type PropAType = T["a"]; // number 你用键名可以取出对象键值,自然也就可以取出接口上键值(也就是类型)啦~ 但这种写法很明显有可以改进地方:...这样就很离谱了,我们可是机智程序员。 如果把接口换成对象再想想,假设要拷贝一个对象(假设没有嵌套),new 一个新对象,然后遍历原先对象键值对来填充新对象。...以一个使用条件类型作为函数返回值类型例子: declare function strOrNum( x: T ): T extends true ?

    1.6K20

    Typescript常看常新

    原因是这时 TypeScript 会推断变量obj类型为空对象,实际执行是下面的代码。...对象属性 对象属性索引 对象方法 函数 构造函数 对象方法共有三种写法。...; 运算符 终于到了运算符,这块用比较少,学习一下! keyof 运算符 keyof 是一个单目运算符,接受一个对象类型作为参数,返回该对象所有键名组成联合类型。 注意,是联合类型!...(A & B); // 相当于 keyof (A & B) ≡ keyof A | keyof B keyof 取出是键名组成联合类型,如果想取出键值组成联合类型,可以像下面这样写 type...得出结果也是一个联合类型 方括号运算符([])用于取出对象键值类型,比如T[K]会返回对象T属性K类型。

    20110

    TypeScript - keyof

    TypeScript 中,keyof 关键字是一个有用类型操作符,它用于获取一个类型所有公共属性键联合(Union)。当你想要操作一个类型键而不是它值时,keyof 操作符非常有用。...与索引签名一起使用 keyof 操作符经常与索引签名(Indexable Type)一起使用,索引签名允许你通过键来访问对象属性。...keyof Person 将包含所有这些可能键以及明确声明属性键 "age"。 类型守卫和断言 keyof 可以用来创建类型守卫,确保某个键存在于对象中。...getProperty(person, 'name'); // string const age = getProperty(person, 'age'); // number 在这个例子中,getProperty 函数接受一个对象和一个键...泛型 K 被约束为 T 键之一,这样 TypeScript 就可以确保键是有效keyofTypeScript 提供一个强大工具,它允许你以类型安全方式操作对象键。

    12810

    TypeScript高级类型工具类型及关键字

    本文主要帮助理解 TypeScript高级类型及工具类型。在实际使用 TypeScript 开发过程中,得益于这些高级类型于工具类型,我们可以更方便构建出我们需要类型。...一、高级类型 泛型 泛型可以理解为一个变量,这个变量值是一个类型。和函数参数一样。...它通常配合一组尖括号进行声明使用: // 一个带有 name 属性类型 type Cup = { name: string; }; // 声明一个接收三个参数函数, // 第一个参数是必须拥有name...属性 object // 第二个参数设置为第一个参数这个对象一个属性 // 第三个参数设置为第二个参数属性值 const addAttr = <T extends {name: string},...,使用 “ & ”连接多个类型,使用其作为值类型时必需同时满足所有类型。

    2.1K30

    【TS 演化史 -- 17】各文件JSX工厂 、有条件类型和映射类型修饰符

    什么是JSX工厂 JSX不是 ECMAScript 标准一部分;也就是说,它本身不是有效 JS。因此,包含JSX脚本或模块不能直接在浏览器中运行。...与带有类型注释文件一样,JSX 文件首先需要编译成纯 JS 文件。--jsxFactory选项告诉 TypeScript 编译器应该如何编译JSX元素。 注意 Hello World!...never类型是 TypeScript 底层类型,表示从未出现类型。 分布式有条件类型 那么,为什么e 条件类型和never类型组合是有用呢?它有效地允许咱们从联合类型中删除组成类型。...首先,咱们将User类型作为T类型参数类型参数提供: type NonNullableUserPropertyKeys = { [P in keyof User]: null extends User...TypeScript 一个长期存在特性要求是能够提取给定函数返回类型。下面是ReturnType类型简化版本,该类型是在lib.es5.d.ts中预定义

    2.5K20

    Typescript 高级用法以及项目实战问题

    本文主要介绍 TypeScript 高级用法,适用于对 TypeScript 已经有所了解或者已经实际用过一段时间同学,分别从类型、运算符、操作符、泛型角度来系统介绍常见 TypeScript...,避免使用 any 作为函数参数类型而导致静态类型检查 bug: function test(input: unknown): number { if (Array.isArray(input)...三、操作符 键值获取 keyof keyof 可以获取一个类型所有键值,返回一个联合类型,如下: type Person = { name: string; age: number; } type...PersonKey = keyof Person; // PersonKey得到类型为 'name' | 'age' keyof 一个典型用途是限制访问对象 key 合法化,因为 any 做索引是不被接受...keyof 语法格式如下 类型 = keyof 类型 实例类型获取 typeof typeof 是获取一个对象/实例类型,如下: const me: Person = { name: 'gzx'

    1.9K50

    TypeScript 官方手册翻译计划【七】:类型操控-类型操作符

    因为我也是 TypeScript 初学者,所以无法保证翻译百分之百准确,若有错误,欢迎评论区指出; 翻译内容:暂定翻译内容为 TypeScript Handbook,后续有空会补充翻译文档其它部分;...项目地址:TypeScript-Doc-Zh,如果对你有帮助,可以点一个 star ~ 本章节官方文档地址:Keyof Type Operator、Typeof Type Operator Keyof...类型操作符 keyof 类型操作符 keyof 类型操作符接受一个对象类型作为参数,并基于它键产生一个由字符串字面量或者数值字面量组成联合类型。...| number —— 这是因为 JavaScript 对象键总是会被强制转化为一个字符串,因此 obj[0] 等同于 obj["0"]。...^ // type K = boolean 如果直接把函数作为参数传递给 ReturnType,那么我们会看到一个指示性错误: function f() { return { x

    57420

    TypeScript 演化史 — 第七章】映射类型和更好字面量类型推断

    freezePoint 函数接受一个 Point 作为参数并冻结该参数,接着,向调用者返回相同对象。然而,该对象类型已更改为FrozenPoint,因此其属性被静态类型化为只读。...需要 freezePoint 函数。对于希望在应用程序中冻结每种类型对象,咱们就必须定义一个包装器函数,该函数接受该类型对象并返回冻结类型对象。...咱们可以更新任意多个属性,这使得setState方法成为 Partial 一个很好用例。 Lodash:pick 函数从一个对象中选择一组属性。...string 而不是 “GET”,则会出现编译时错误,因为无法将HTTP_GET 作为第二个参数传递给get函数: Argument of type 'string' is not assignable...to parameter of type '"GET" | "POST"' 当然,如果相应参数只允许两个特定字符串值,则不允许将任意字符串作为函数参数传递。

    3.8K40

    探索TypeScript映射类型,从简单到高级7个实例

    keyof 操作符:keyofTypeScript一个操作符,它返回一个类型所有属性名联合类型。...类比JavaScript中map函数 是不是觉得这和JavaScript中map函数非常相似呢?在JavaScript中,map函数用于遍历数组并对每个元素执行指定操作。...email: string; }; 七、使用模板字面量类型创建新属性名 在TypeScript中,我们可以使用模板字面量类型来创建带有特定前缀和大写属性名新类型。...创建带有get前缀属性类型 接下来,我们定义一个泛型类型Getters,它会为类型中每个属性创建一个带有get前缀函数。...创建带有set前缀属性类型 同样,我们可以定义一个泛型类型Setters,它会为类型中每个属性创建一个带有set前缀函数

    18010

    构造类型抽象、TypeScript 编程内参(二)

    本文是《TypeScript 编程内参》系列第二篇:构造类型抽象,主要记述 TypeScript 高级使用方法和构造类型抽象。 PS: 本文语境下「约束」指的是「类型对值约束」 ?...如果你喜欢用 Array.prototype.reduce 规约数组的话,对象索引会用比较多 七、利用 keyof 构造键名联合 keyof 是 ts 提供类型运算符,用于取出对象类型键名联合,返回结果是一个联合类型...T 意思是说, 遍历 keyof T 里元素作为 key, 将这些 key 作为键,并将这些键所对应值类型设置为 nunber。...[K] } 把上面的推导过程整理一下,可以得到 GetStaticFor 用于抽取某对象类型函数项: // 这里思想是取出静态项所对应 keys type GetStaticKeysFor...never : K }[keyof T]; // 然后再利用这个 keys 去遍历原对象来取出对应键值 type GetStaticFor = { [K in GetStaticKeysFor

    68530

    TypeScript 演化史 -- 7】映射类型和更好字面量类型推断

    freezePoint 函数接受一个 Point 作为参数并冻结该参数,接着,向调用者返回相同对象。然而,该对象类型已更改为FrozenPoint,因此其属性被静态类型化为只读。...需要 freezePoint 函数。对于希望在应用程序中冻结每种类型对象,咱们就必须定义一个包装器函数,该函数接受该类型对象并返回冻结类型对象。...咱们可以更新任意多个属性,这使得setState方法成为 Partial 一个很好用例。 Lodash:pick 函数从一个对象中选择一组属性。...string 而不是 “GET”,则会出现编译时错误,因为无法将HTTP_GET 作为第二个参数传递给get函数: Argument of type 'string' is not assignable...to parameter of type '"GET" | "POST"' 当然,如果相应参数只允许两个特定字符串值,则不允许将任意字符串作为函数参数传递。

    2.8K10

    分享 40 道关于 Typescript 面试题及其答案

    定义带有可选参数和默认参数函数。可选参数修饰符以及为参数分配默认值。...答案:TypeScriptkeyof”关键字是一个类型运算符,它返回表示对象文字类型联合。它允许您对对象键执行类型安全操作。...它们可以实现更好类型推断,并提供一种更有效地处理联合类型方法。...答案:条件类型中keyof”关键字用于获取对象类型并集。它允许您以类型安全方式使用对象键。“in”关键字检查属性键是否存在于从“keyof”获得并集中。...答案:TypeScriptkeyof”运算符用于获取对象类型并集。它允许您以类型安全方式使用对象键。

    63830

    TypeScript 演化史 — 第六章】对象扩展运算符和 rest 运算符及 keyof 和查找类型

    一个对象不同属性可以有完全不同类型,咱们甚至不知道 obj 是什么样子。 那么如何在 TypeScript 中编写这个函数呢?...,TypeScript 就不知道将为 key 参数传递哪个值,所以它不能推断出prop函数更具体返回类型。...咱们需要提供更多类型信息来实现这一点。 keyof 操作符号 在 JS 中属性名称作为参数 API 是相当普遍,但是到目前为止还没有表达在那些 API 中出现类型关系。...而且,它应该是特定于Todo类型解决方案,而不是通用解决方案。 索引类型查询 有了 keyof,咱们现在可以改进 prop 函数类型注解。我们不再希望接受任意字符串作为 key 参数。...} TypeScript 现在以推断 prop 函数返回类型为 T[K],这个就是所谓 索引类型查询 或 查找类型。

    3.2K50

    速查手册 - TypeScript 高级类型 cheat sheet

    X : Y 表示,如果 T 可以赋值给 U (类型兼容),则返回 X,否则返回 Y; 1.3、使用 `keyof` 和 `in` keyof 可以用来取得一个对象接口所有 key 值: interface...扩展:内置 Partial 有个局限性,就是只支持处理第一层属性,如果是嵌套多层就没有效果了,不过可以如下自定义: type PowerPartial = { // 如果是 object...R : any; 解释: 我们可以用 infer 声明一个类型变量,是用它获取函数返回类型,简单说就是用它取到函数返回值类型方便之后使用....4.1、ThisType(官方) 作用:用于指定上下文对象类型 源码: // node_modules/typescript/lib/lib.es5.d.ts interface ThisType<...Person 这个类型了 4.2、InstanceType(官方) 作用:用于获取构造函数类型实例类型 源码: // node_modules/typescript/lib/lib.es5.d.ts

    1.3K10
    领券