如何用 TypeScript 的 keyof 实现类型安全的属性访问？

在 TypeScript 中，keyof 是一个强大的工具，用于获取对象类型的键集合。结合泛型，keyof 可以帮助我们在编译时确保属性访问的安全性，避免运行时错误。本文将介绍如何使用 keyof 安全地获取对象属性。

1. 什么是 keyof？

keyof 是 TypeScript 中的一个操作符，用于获取对象类型的所有键（属性名）的联合类型。例如：

ini 复制代码

type Person = {
  name: string;
  age: number;
};

type PersonKeys = keyof Person; // "name" | "age"

在上面的例子中，PersonKeys 类型是 "name" | "age"，表示 Person 对象的所有键。

2. 使用 keyof 安全获取属性

假设我们有一个对象，并且我们想要安全地访问它的属性。使用 keyof 可以确保我们只访问对象中存在的属性，从而避免运行时错误。

ini 复制代码

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

const person: Person = {
  name: "Alice",
  age: 30,
};

const name = getProperty(person, "name"); // 安全获取 "name" 属性
const age = getProperty(person, "age");  // 安全获取 "age" 属性

// 以下代码会报错，因为 "address" 不是 Person 的键
// const address = getProperty(person, "address");

在上面的代码中，getProperty 函数使用了泛型 T 和 K extends keyof T，确保 key 是 T 类型的有效键。

这样，TypeScript 在编译时就会检查我们是否访问了对象中不存在的属性。

3. 结合 keyof 和映射类型

keyof 还可以与映射类型结合使用，创建新的类型。例如，我们可以创建一个类型，将对象的所有属性变为可选：

ini 复制代码

type Partial<T> = {
  [P in keyof T]?: T[P];
};

type PartialPerson = Partial<Person>;
// PartialPerson 类型等价于：
// {
//   name?: string;
//   age?: number;
// }

在这个例子中，Partial<T>类型使用 keyof T 遍历 T 的所有键，并将每个属性变为可选的。

4. 实际应用场景

在实际开发中，keyof 常用于以下场景：

动态访问对象属性：确保在编译时检查属性是否存在。

创建工具类型：如 Partial、Readonly 等。

类型安全的配置对象：确保配置对象的键是已知的。

5. 总结

keyof 是 TypeScript 中一个非常有用的工具，它可以帮助我们在编译时确保对象属性访问的安全性。通过结合泛型和映射类型，我们可以创建更加灵活和安全的代码。希望本文能帮助你更好地理解和使用 keyof。

如果你对 TypeScript 的更多高级特性感兴趣的话，欢迎继续关注我的微信公众号【前端的日常】，我会分享更多前端开发的小技巧和面试题解析！