TypeScript系列：第四篇 - typeof 与 keyof
TypeScript系列：第四篇 - typeof 与 keyof
在 TypeScript系列：第三篇 - 泛型 有提及 keyof 的使用。
本文将详细介绍 keyof 和 typeof 运算符的基本概念、应用场景以及如何结合使用它们来提高代码的类型安全性。
keyof
keyof 运算符用于获取一个类型的所有键名（属性名）。
例如，对于一个接口或类型，keyof 可以提取出所有属性的名字。
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // "name" | "age"应用场景
类型安全
确保访问的属性在对象上是有效的，避免运行时错误
interface Person {
name: string;
age: number;
}
function getPersonProp(person: Person, prop: keyof Person) {
return person[prop];
}
const p: Person = { name: 'ligang', age: 34 };
getPersonProp(p, 'name');
getPersonProp(p, 'address'); // 类型“"address"”的参数不能赋给类型“keyof Person”的参数映射类型
在已有类型的基础上创建新类型。
将 Custom 所有类型改为 boolean，并形成新的 myCustom 类型。
type OptionsFlags<T> = {
[Property in keyof T]: boolean;
};
interface Custom {
a: () => void;
b: () => void;
}
type myCustom = OptionsFlags<Custom>; // { a: boolean; b: boolean;}条件映射类型
在上述映射类型的基础基础上，可以根据属性类型进行动态类型转换。
将 Custom 所有 string类型改为 boolean(其他类型保留)，并形成新的 myCustom 类型。
type OptionsFlags<T> = {
[Property in keyof T]: T[Property] extends String ? boolean : T[Property];
};
interface Custom {
a: () => void;
b: string;
c: number;
}
type myCustom = OptionsFlags<Custom>; // { a: () => void; b: boolean; c: number}keyof 具有特别强的灵活性。其可以针对获取的键名，做个性化改造！
将 Custom 所有类型改为可选，并形成新的 myCustom 类型。
type Partial<T> = {
[P in keyof T]?: T[P];
};
interface Custom {
foo: number;
}
type myCustom = Partial<Custom>; // { foo?: number }typeof
typeof 运算符用于获取一个变量的类型。
这在 TypeScript 中非常有用，可以动态地从变量中提取类型信息。
const person = {
name: 'ligang',
age: 34
};
type PersonType = typeof person; // { name: string; age: number; }应用场景
类型推导
从变量中推导出类型，用于类型声明。
let h = 'hello';
let w: typeof h = 'world'; // let w: string类型安全
在函数中使用 typeof 来限制参数类型。
const person = { name: 'ligang', age: 34 };
function greet(name: typeof person.name) { // name: string
console.log(`Hello, ${name}!`);
}类型守卫
此类型守卫函数中，isNumber 检查 x 是否为 number 类型。
function isNumber(x: number | string): x is number {
return typeof x === "number";
}结合使用
获取一个对象所有键的联合类型
在实际开发中，经常需要结合使用 keyof 和 typeof 来实现更复杂的类型操作。
const person = { name: 'ligang', age: '34' };
type Person = keyof typeof person; // "name" | "age"1️⃣ typeof person
typeof person // { name: string; age: string; }从变量 person 中提取类型信息；返回的是 person 的类型，而不是 person 本身。
2️⃣ keyof
keyof { name: string; age: string; } // "name" | "age"⚠️ 注意：keyof person 会导致编译错误。这里 person 是具体的对象，不是类型。
获取一个枚举所有键的联合类型
enum Color {
Red,
Green,
Blue,
}
type ColorKeys = keyof typeof Color; // "Red" | "Green" | "Blue"
const color: ColorKeys = 'Red';typeof Color 会获取到 Color 枚举的类型，它包含了枚举的所有成员。
使用 keyof 操作符，可以得到一个由这些成员名组成的联合类型。
🌴🌴🌴 typeof 针对的是变量；keyof 面向的是类型。
腾讯云开发者
