目录:
一、介绍
二、应用
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后面会讲到。