外贸网站海外推广3个必去网站设计品牌网站公司

在 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: stringconsole.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 面向的是类型。