Skip to content
目录:

一、介绍

二、应用
  1、定义索引签名
  
  2、类型推断
  
  3、Partial、Pick 和 Omit 类型
  
字数:大约600字

一、介绍

keyof 操作符在 TypeScript 中非常常用,它用于获取某个类型的所有属性名。keyof 的使用方式为:

ts
type MyType = {
  name: string;
  age: number;
  gender: string;
}

type Keys = keyof MyType; // "name" | "age" | "gender"

这里 Keys 的类型为 "name" | "age" | "gender",表示 MyType 这个类型的所有属性名。

那么 keyof 有哪些具体的应用呢?

2、应用

2.1:定义索引签名

keyof 可以用来定义索引签名,例如:

ts
type MyType = {
  [key: string]: number;
}

const obj: MyType = {
  a: 1,
  b: 2,
  c: 3
};

console.log(obj["a"]); // 1
console.log(obj["b"]); // 2
console.log(obj["c"]); // 3

这里 MyType 的定义中使用了 [key: string]: number,表示 MyType 这个类型中所有属性名都为字符串类型,属性值都为数字类型。这样就可以通过任意字符串作为属性名来访问对象的属性。

2.2:类型推断

keyof 还可以用来进行类型推断,例如:

ts
type MyType = {
  name: string;
  age: number;
  gender: string;
}

function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const obj: MyType = {
  name: "Tom",
  age: 18,
  gender: "male"
};

const name = getValue(obj, "name"); // name 的类型为 string
const age = getValue(obj, "age"); // age 的类型为 number
const gender = getValue(obj, "gender"); // gender 的类型为 string

这里 getValue 的参数 obj 的类型为 T,而 key 的类型为 K,K extends keyof T 表示 K 必须是 T 中的属性名。函数返回值的类型为 T[K],即 obj 中属性名为 key 的属性值的类型。

因此在通过 getValue 函数进行属性值访问时,会根据传入的 key 参数的类型进行类型推断并推导出返回值的类型。

2.3:Partial、Pick 和 Omit 类型

keyof 还可以用于定义某些常见的类型,例如 Partial、Pick 和 Omit 类型。

Partial 类型用于将某个类型中的所有属性变为可选属性,例如:

ts
type MyType = {
  name: string;
  age: number;
  gender: string;
}

type PartialMyType = {
  [P in keyof MyType]?: MyType[P]
}

const obj: PartialMyType = {
  name: "Tom"
}

这里 PartialMyType 定义中,使用了 [P in keyof MyType]?: MyType[P],表示将 MyType 中所有属性变为可选属性。

同理,Pick 和 Omit 也可以用 keyof 来实现,例如:

ts
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
}

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

这里的 Pick 表示从 T 类型中挑选 K 中包含的属性来创建一个新类型,而 Omit 则是从 T 类型中排除 K 中包含的属性来创建一个新类型。

关于Pick和Omit后面会讲到。