在 TypeScript 中使用 keyof 运算符
-
在 TypeScript 中使用
keyof运算符 -
在 TypeScript 中使用带有泛型的
keyof运算符 -
在 TypeScript 中对映射类型使用
keyof运算符 -
在 TypeScript 中使用
keyof运算符通过typeof运算符从枚举中提取键 -
在 TypeScript 中使用
keyof运算符定义 Getter - 结论
本教程演示了如何在 TypeScript 中使用 keyof 运算符。
在 TypeScript 中，有两种类型，用户定义和原始类型，如数字、布尔值和字符串。
用户定义类型通常是对象中原始类型的组合。它可以是表示嵌套或简单键值对的对象。
在 TypeScript 中使用 keyof 运算符
我们可以使用 keyof 运算符将类型的公共属性名称提取为联合。它是一个重要的运算符，广泛用于编写泛型和重用现有类型。
例子：
interface Person {
name : string;
age : number ;
}
type PersonType = keyof Person;
const AgeAttribute : PersonType = 'age'
const NameAttribute : PersonType = 'name';
上面是一个简单的例子，说明了我们如何使用 keyof 运算符从 TypeScript 中的用户定义类型中提取键。
keyof 运算符将类型的所有键作为类型的字符串联合返回。它还可以找到传递给原始类型的键。
type PrimitiveNumberKeys = keyof number;
// "toString" | "toFixed" | "toExponential" | "toPrecision" | "valueOf" | "toLocaleString"
尽管 keyof 运算符对于原始类型可能不方便，但我们仍然可以将其应用于原始类型和用户定义类型。
在 TypeScript 中使用带有泛型的 keyof 运算符
TypeScript 泛型对于制作广泛接受的函数定义和类型至关重要。
keyof 运算符可以为函数泛型的自由度添加一些约束。以下代码段解释了我们如何实现这一点。
interface Person {
name : string;
age : number ;
}
function getWitcherAttribute<T, K extends keyof T>( person : T, key : K) : T[K] {
return person[key];
}
const witcher : Person = {
name : 'Geralt',
age : 95
}
console.log(getWitcherAttribute(witcher, 'name'));
输出：
"Geralt"
这个 keyof 运算符可以用作用户定义类型的对象的 getter。
K extends keyof T 将分配给 K 的键限制为 T 类型的键。T[k] 返回与类型 T 相同的类型。
在 TypeScript 中对映射类型使用 keyof 运算符
我们已经看到了 keyof 运算符如何使用 extends 关键字来约束泛型中的某些类型。
我们可以使用 in 关键字进一步将泛型用作映射类型。
以下是 TypeScript 中 Partial 类型的实现。
Partial 类型用于使 TypeScript 中类型的所有字段都是可选的。我们使用 ? 来实现它运算符，使键可选。
interface Person {
name : string;
age : number ;
}
type Optional<T> = {
[K in keyof T]? : T[K]
}
const witcher : Optional<Person> = {
name : "Witcher"
}
同样，我们可以在 TypeScript 中实现 Omit 和 Pick 类型。
type PickType<T, K extends keyof T> = {
[P in K] : T[P]
}
type OmitType<T, K extends keyof T> = PickType<T, Exclude<keyof T, K>>
const witcherWithoutAge : OmitType<Person, 'age'> = {
name : "Geralt"
};
const witcherWithOnlyAge : PickType<Person, 'age'> = {
age : 95,
}
这些类型被定义为 PickType 和 OmitType 以避免与原始 Pick 和 Omit 类型重复。这些是 TypeScript 中使用 keyof 运算符的 Pick 和 Omit 的实际实现。
在 TypeScript 中使用 keyof 运算符通过 typeof 运算符从枚举中提取键
keyof 运算符还可以从 enum 中提取键。
例子：
enum Colors {
Yellow,
Red,
Black,
Blue,
Green
}
type ColorType = typeof Colors;
type AllColors = keyof ColorType;
// "Yellow" | "Red" | "Black" | "Blue" | "Green"
// it can be also be written together
type AllColors = keyof typeof Colors
该操作符非常方便，可用于进一步创建 Record 类型。
假设创建了一个映射，将 colorType 映射到字符串类型的日志消息。它可以使用 Record 类型来实现。
例子：
type LogColorMap = Record<AllColors, string>
const LogLevel : LogColorMap = {
Black : "Normal",
Blue : "Info",
Green : "Success",
Red : "Danger",
Yellow : "Warning"
}
因此，枚举用于使用 keyof 运算符有效地创建另一种类型。
在 TypeScript 中使用 keyof 运算符定义 Getter
我们可以使用 keyof 运算符为类型创建 getter。我们使用映射类型的概念，并使用 Capitalize 类型将键大写。
例子：
interface Person {
name : string;
age : number ;
}
type Getters<T> = {
[P in keyof T as `get${Capitalize<string & P>}`] : () => T[P];
}
class PersonCls implements Person, Getters<Person> {
age;
name;
constructor(){
this.age = 95;
this.name = "Geralt";
}
getName = () => {
return this.name;
}
getAge = () => {
return this.age;
}
}
const witcher = new PersonCls();
console.log(witcher.getName())
输出：
"Geralt"
结论
因此，keyof 运算符有各种用例，特别是在创建具有许多泛型类型的库时使用。此外，它还用于从现有类型中提取类型并创建新类型。
