首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏前端黑板报

    TypeScript - keyof

    在 TypeScript 中,keyof 关键字是一个有用的类型操作符,它用于获取一个类型所有公共属性键的联合(Union)。当你想要操作一个类型的键而不是它的值时,keyof 操作符非常有用。 基本用法 对于任何类型 T,keyof T 会产生一个类型,该类型是 T 的所有公共属性键的联合。 keyof Person 将包含所有这些可能的键以及明确声明的属性键 "age"。 类型守卫和断言 keyof 可以用来创建类型守卫,确保某个键存在于对象中。 与泛型结合 keyof 可以与泛型结合使用,以提供更通用的类型。 keyof 是 TypeScript 提供的一个强大的工具,它允许你以类型安全的方式操作对象的键。通过使用 keyof,你可以编写出更灵活和可重用的代码。

    45610编辑于 2024-05-13
  • 来自专栏全栈修仙之路

    TypeScript keyof 操作符

    一、keyof 简介 TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称。 | ... type K3 = keyof { [x: string]: Person }; // string | number 除了接口外,keyof 也可以用于操作类,比如: class Person K 类型必须为 keyof T 联合类型的子类型。 三、keyof 与对象的数值属性 在使用对象的数值属性时,我们也可以使用 keyof 关键字。 最后,我们来简单介绍一下 keyof 与 typeof 操作符如何配合使用。 四、keyof 与 typeof 操作符 typeof 操作符用于获取变量的类型。

    8.4K40发布于 2020-03-09
  • 来自专栏随便写写-kifuan

    TS中keyof和typeof

    方案 使用keyof解决这种问题: function getProp<T>(obj: T, key: keyof T) { return obj[key] } console.log(getProp 我的目的就是,把那句Colors as any改掉,如果想用keyof的话,那么我们起码要获取到Colors的类型,但是这里他是一个字面量对象,所以本文要提到的另一个东西就引出来了,它就是typeof。 所以我们的getColor方法可以这样写: function getColor(key: keyof Color) { return Colors[key] } 综合一下,变成下面这样: function getColor(key: keyof typeof Colors) { return Colors[key] } 再进阶 如果我想让输入#FF0000这样的字符串并且把Red返回去,那么在不改变 [0] } console.log(getColorName('#FF0000')) // Red 一定要有as const,不然TS编译器只能推导出Color[keyof Color]是string

    1.5K20编辑于 2022-10-24
  • 来自专栏大宇笔记

    TypeScript系列教程九《类型转换》-- keyof和typeof 操作

    keyof 操作 ---- keyof 见名知其意,就是获取对象所有的key,然后返回一个新的联合类型。 例如: type Point = { x: number; y: number }; type P = keyof Point; 扩展用途,将属性类型由number 修改成string: type SPoint = {[K in P]:string} 如果一个类型由string、number索引签名,keyof 会返回这些类型代替。 type Arrayish = { [n: number]: unknown }; type A = keyof Arrayish; //A的类型是number type Mapish = { [k: string]: boolean }; type M = keyof Mapish; //type M = string | number typeof 操作 ---- 之前JS早就存在typeof,typeof

    2.1K21发布于 2021-08-05
  • 来自专栏Super 前端

    TypeScript系列:第四篇 - typeof 与 keyof

    在 TypeScript系列:第三篇 - 泛型 有提及 keyof 的使用。 本文将详细介绍 keyof 和 typeof 运算符的基本概念、应用场景以及如何结合使用它们来提高代码的类型安全性。 keyof keyof 运算符用于获取一个类型的所有键名(属性名)。 例如,对于一个接口或类型,keyof 可以提取出所有属性的名字。 2️⃣ keyof keyof { name: string; age: string; } // "name" | "age" ⚠️ 注意:keyof person 会导致编译错误。 使用 keyof 操作符,可以得到一个由这些成员名组成的联合类型。 typeof 针对的是变量;keyof 面向的是类型。

    82211编辑于 2025-05-31
  • 来自专栏前端达人

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

    一、如何定义 KeyOf 运算符 在 TypeScript 中,keyof 运算符用于获取用户定义的值。它主要用于泛型,格式类似于联合运算符及其属性。keyof 运算符会检索用户指定的值的索引。 二、在泛型中使用 KeyOf 运算 使用 KeyOf 运算符应用约束 在 TypeScript 中,keyof 运算符常用于在泛型函数中应用约束。 三、 KeyOf 与映射类型的结合使用 在 TypeScript 中,我们可以使用 keyof 运算符与映射类型结合,将现有类型转换为新类型。 使用 KeyOf 运算符创建联合类型 在 TypeScript 中,当我们在具有显式键的对象类型上使用 keyof 运算符时,它会创建一个联合类型。 当我们将 keyof 与 TypeScript 的其他工具结合使用时,可以提供良好的类型约束,从而提升代码的类型安全性。 keyof 类型注解用于提取对象的键。

    1.5K10编辑于 2024-06-14
  • 来自专栏Cellinlab's Blog

    TS 进阶 - 类型编程

    export type MarkPropsAsOptional< T extends object, // T 为要处理的对象 K extends keyof T = keyof T // K T]: T[K]; }; export type MarkPropsAsOptional< T extends object, K extends keyof T = keyof T > = type MarkPropsAsNonNullable< T extends object, K extends keyof T = keyof T > = Flatten<Omit<T, K PlainObjectType, U extends PlainObjectType > = Difference<keyof T, keyof U>; // 属性名补集 export type ObjectKeysComplement< T extends U, U extends PlainObjectType > = Complement<keyof T, keyof U>;

    97430编辑于 2023-05-17
  • 来自专栏贺贺的前端工程师之路

    TS高级类型

    keyof 获取类型内所有的 key,即所有属性名 , 获取的是一个 联合类型 这里类型指:通过 interface 或 type 定义的类型;通过 typeof xxx 返回的类型等。 keyof 后面必须是类型,不能是具体的对象 interface IPeople { name:string, age? T> = { [P in K]: T[P]; }; // keyof T 获取 T 中所有的 key 属性 //K extends keyof T K 必须继承于 keyof T ,如果 K 中的属性有不属于 keyof T 的则会报错 interface IPeople { name:string, age? : number | undefined; } Partial 将T中的所有属性设置为可选 type Partial<T> = { [P in keyof T]?

    1.1K20编辑于 2023-02-14
  • 来自专栏前端到底怎么学好来

    【TypeScript】TS自定义类型之对象属性必选、对象属性可选

    : T[P];} & Pick<T, Exclude<keyof T, K>>;type Simplity<T> = { [P in keyof T]: T[P] }type Info = {name: PartialByKeys<T, K extends keyof T> = {[P in K]? Exclude<keyof T, K>K为'id' | 'name'keyof T为'name'| 'id'| 'age'| 'class'接着使用Pick工具类型,从对象的类型(info)中抽取出指定类型的键值 1.代码实现type RequiredByKeys<T, K extends keyof T> = {[P in K]-? : T[P];} & Pick<T, Exclude<keyof T, K>>;type Simplity<T> = { [P in keyof T]: T[P] }type Info = {name:

    7.3K21编辑于 2023-11-28
  • 来自专栏coldPlayer的前端专栏

    TypeScript自定义类型之对象属性必选、对象属性可选

    : T[P];} & Pick<T, Exclude<keyof T, K>>;type Simplity<T> = { [P in keyof T]: T[P] }type Info = {name: PartialByKeys<T, K extends keyof T> = {[P in K]? Exclude<keyof T, K>K为'id' | 'name'keyof T为'name'| 'id'| 'age'| 'class'接着使用Pick工具类型,从对象的类型(info)中抽取出指定类型的键值 1.代码实现type RequiredByKeys<T, K extends keyof T> = {[P in K]-? : T[P];} & Pick<T, Exclude<keyof T, K>>;type Simplity<T> = { [P in keyof T]: T[P] }type Info = {name:

    3.3K20编辑于 2023-11-13
  • 来自专栏前端开发

    深入理解 TypeScript 中的类型提取语法与实际应用

    它表示从类型 T 中取出所有 keyof T & number 对应的值。keyof Tkeyof T 表示获取类型 T 的所有键的联合类型。 在这里,keyof T & number 表示仅保留 keyof T 中属于数字的部分。这是因为元组或数组的值是通过数字索引访问的,其他字符串键(如 length, push)并不在我们的关注范围内。 keyof T & number 提取 T 中对应键的值。 对于 [string, number, boolean] 类型,keyof T & number 是 0 | 1 | 2,因此 T[keyof T & number] 的值是 string | number ;关键点总结T[keyof T & number] 的作用是从数组或元组类型中提取所有可能的值。keyof T 包括所有键,但通过交集 & number 限制为数字索引。

    43410编辑于 2025-01-18
  • 来自专栏全栈程序员必看

    TypeScript高级类型-Partial

    对照最开始 Partial 的类型定义,能够捕捉到以下重要信息 keyof 是干什么的? in 是干什么的? [P in keyof T] 中括号是干什么的? ? keyof keyof,即 索引类型查询操作符,我们可以将 keyof 作用于泛型 T 上来获取泛型 T 上的所有 public 属性名构成的 联合类型 注意:”public、protected、private 的作用 上述问题中 [P in keyof T] 中括号是干什么的? T[P] 我们可以通过 keyof 查询索引类型的属性名,那么如何获取属性名对应的属性值类型呢? | number 属性值类型组成的联合类型 最后我们希望得到的是由多个 key, value 组成的新类型,故而在 [P in keyof T]?

    94720编辑于 2022-11-17
  • 来自专栏lhyt前端之路

    再次研究一道网红typescript面试题

    T]: T[k] } 复制代码 在映射类型后面加上[keyof T],相当于valueof的方法了——返回的是这个类型里面所有的key的value的联合类型: const o = { a: 1 基于Pick,就可以实现Omit type MyOmit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>; 复制代码 获取value为function 类型的key type FunctionKeys<T> = { [k in keyof T]: T[k] extends Function ? k : never }[keyof T] type functionKeys = Pick<EffectModule, FunctionKeys<EffectModule>> 复制代码 使用Omit实现 type noFunctionKeys<T> = { [k in keyof T]: T[k] extends Function ?

    1.3K10发布于 2020-07-15
  • 来自专栏Cellinlab's Blog

    TypeScript 类型体操 - 进阶

    : number | undefined; // } # Required type Required<T> = { [P in keyof T]-? OneParam | keyof OtherParam]: K extends keyof OneParam ? K extends keyof OtherParam ? { [Key in Cursor as Key extends keyof any ? Key : never]: Rest extends unknown[] ? A, keyof B>> & Partial<Pick<A, Extract<keyof A, keyof B>>> & Partial<Pick<B, Exclude<keyof B, keyof

    56260编辑于 2023-05-17
  • 来自专栏写两行代码放松下

    TypeScript 类型体操 03

    T> = { [R in Exclude<keyof T, K>]: T[R] } /* _____________ Test Cases _____________ */ import type T = keyof T> = { [R in Exclude<keyof T, K>]: T[R] } & { readonly [R in K]: T[R] } /* _____________ : string completed: boolean } 这里最神奇的地方是:MyReadonly2<T, K extends keyof T = keyof T>中的K extends keyof T = keyof T他的意思是给K提供一个默认值,如果没有提供K,就使用默认值keyof T,真的是太神奇了。 T]: keyof T[K] extends never ?

    54760编辑于 2022-05-11
  • 来自专栏路过君BLOG from CSDN

    typescript TS7053错误解决

    解决 function doSomething<T>(obj: T, prop: keyof T) { obj[prop] } keyof 使用关键字 keyof 可以映射对象的所有键名(string 或number)作为一个联合类型 下例中的变量P相当于类型 “x” | “y” type Point = { x: number; y: number }; type P = keyof Point; 如果类型包含number或string类型的索引签名,keyof则会返回number或string 下例中变量A相当于类型 number type Arrayish = { [n: number]: unknown }; type A = keyof Arrayish; 下例中变量M相当于类型 string | number type Mapish = { [k: string]: boolean }; type M = keyof Mapish; 参考官方文档

    1.2K30编辑于 2022-04-13
  • 来自专栏前端之旅

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

    暂定翻译内容为 TypeScript Handbook,后续有空会补充翻译文档的其它部分; 项目地址:TypeScript-Doc-Zh,如果对你有帮助,可以点一个 star ~ 本章节官方文档地址:Keyof Type Operator、Typeof Type Operator Keyof 类型操作符 keyof 类型操作符 keyof 类型操作符接受一个对象类型作为参数,并基于它的键产生一个由字符串字面量或者数值字面量组成的联合类型 下面的类型 P 等同于类型 "x" | "y": type Point = { x: number; y: number }; type P = keyof Point; ^ // type P = keyof Point 如果 keyof 操作的类型有 string 或者 number 类型的索引签名,那么 keyof 会返回该索引签名的类型: type Arrayish = { keyof 类型和映射类型结合的时候会发挥很大的作用,后续的章节我们也会进行介绍。

    78320编辑于 2021-12-06
  • 来自专栏神光的编程秘籍

    从 React 源码的类型定义中,我学到了什么?

    A, keyof B>> A、B 都有的变为可选:Partial<Pick<A, Extract<keyof A, keyof B>>> B 中有但 A 中没有的也变为可选:Partial<Pick< B, Exclude<keyof B, keyof A>>> 这样,这个类型的主要逻辑我们就理清了: 把三部分计算结果的索引类型取交叉类型,就会合并到一起。 那后面那段代码 string extends keyof P 是啥意思? 什么类型的 keyof 结果是 string 呢? string extends keyof Obj 可以判断出 any 和 never 类型,只有这两种类型取 keyof 的结果是 string | nubmer | symbole,包含 string

    1.4K11编辑于 2022-04-12
  • 来自专栏神光的编程秘籍

    TypeScript 类型体操:合并映射类型的处理结果为联合类型

    我是这样写的: type SplitObj<Obj> = { [Key in keyof Obj]: { [Key2 in Key]: Obj[Key2] } }[keyof 再来讲为什么: keyof Obj 我们知道是 key 构成的联合类型 'name' | 'age' | 'height'。 ,然后再传入 keyof Xxx 来取处理过后的值的联合类型。 根据刚才学过的写法,可以这样写: type DFS<Obj> = { [Key in keyof Obj]: Key }[keyof Obj]; 这样就能把每个索引分开处理: 然后具体的处理是需要递归的 type DFS<Obj> = { [Key in keyof Obj]: Key extends string ?

    2.5K40编辑于 2023-02-01
  • 来自专栏前端精读评论

    精读《MinusOne, PickByType, StartsWith...》

    keyof N & First 也是神来之笔,此处本意就是访问 First 下标,但 TS 不知道它是一个安全可访问的下标,而 keyof N & First 最终值还是 First,也可以被 TS T> = {} 我们得用可选与不可选分别描述两个对象拼起来,因为 TS 不支持同一个对象下用两个 keyof 描述,所以只能写成两个对象: type PartialByKeys<T, K = keyof T> = { [Q in keyof T as Q extends K ? T> = { [Q in keyof T as Q extends K ? extends keyof T ?

    1.2K20编辑于 2022-11-21
领券