【TypeScript】ts中的keyof语法和作用

简言

keyof 运算符接收一个对象类型，并产生其键的字符串或数字字面联合。
有的时候使用keyof 可以简化类型定义代码或者约束类型范围。

keyof

keyof 运算符接收一个对象类型，并产生其键的字符串或数字字面联合。意思就是将对象的key提取出来组成一个新的类型。
下面的类型 P 与类型 P = “x” | "y "是同一类型：

type Point = { x: number; y: number };
//	'x' | 'y'
type P = keyof Point;

如果类型有字符串或数字索引签名，keyof 将返回这些类型：

type Arrayish = { [n: number]: unknown };
//	number
type A = keyof Arrayish;

type Mapish = { [k: string]: boolean };
//	string | number 
type M = keyof Mapish;

请注意，在这个示例中，M 是字符串 | 数字–这是因为 JavaScript 对象键总是被强制为字符串，所以 obj[0] 总是等同于 obj[“0”]。

keyof 类型与映射类型相结合时尤其有用。

和泛型搭配使用

和泛型搭配使用，一般就是在函数中定义。
例如下面示例，我在函数定义时约束了key必需是所传obj的key键值：

function getKeyValue<T extends object, K extends keyof T>(obj: T, key: K): T[K] {

  console.log(obj[key]);
  return obj[key]
}
getKeyValue({
  name: 'zsk6',
  age: 18
}, 'age')

约束范型参数的范围

有的时候我们想过滤掉一些key键。

type Person = {
  id: number;
  name: string;
  age: number;
};

type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type P = MyPick<Person, 'id' | 'age'>

这样就可以生成一个指定key集合的新类型。

其他

keyof还可以和if语句、断言（as）、和typeof等约束范围的类型一起使用，形成新的类型。

结语

结束了。