TypeScript 的 Keyof 操作符和映射类型

Keyof 操作符和映射类型：打造更强大、更灵活的 TypeScript 代码

了解 Keyof 操作符：提取对象属性名称

Keyof 操作符是一个强大的 TypeScript 工具，它允许你获取对象的属性名称。这对于创建可重用、可扩展的代码非常有用。例如，考虑以下 Person 接口：

interface Person {
  name: string;
  age: number;
  location: string;
}

我们可以使用 Keyof 操作符提取这个接口中所有属性的名称：

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

映射类型：利用 Keyof 创建新类型

映射类型是一种语法结构，它利用 Keyof 操作符来创建新类型。我们可以在映射类型中使用 Keyof 来获取对象的属性名称，然后使用这些名称创建新类型的属性。

考虑以下映射类型示例，它将 Person 接口中的所有属性名称映射到字符串类型：

type PersonStringMap = {
  [key in keyof Person]: string;
};

这个映射类型创建了一个新的 PersonStringMap 类型，其中包含三个字符串属性：name、age 和 location。我们可以使用 PersonStringMap 类型来创建新对象，如下所示：

const person: PersonStringMap = {
  name: "John",
  age: "30",
  location: "New York"
};

Keyof 和映射类型协同工作：创建一个灵活的函数

Keyof 操作符和映射类型可以协同工作，创建更灵活、更通用的代码。例如，我们可以使用它们创建一个通用的函数，该函数可以将任何对象的属性名称映射到新的值类型。

function mapObject<T, U>(obj: T, f: (key: keyof T) => U): U[] {
  const keys = Object.keys(obj) as (keyof T)[];
  return keys.map((key) => f(key));
}

这个 mapObject 函数将任何对象 obj 中的属性名称映射到新值类型 U。我们可以使用它将 Person 接口中的所有属性名称映射到字符串类型：

const personStringMap = mapObject(person, (key) => person[key].toString());

结论：提升 TypeScript 代码的强大功能

Keyof 操作符和映射类型是 TypeScript 中不可或缺的工具，可以创建更灵活、更可重用的代码。它们赋予我们获取对象属性名称、创建新类型和编写通用函数的能力。

常见问题解答

1. Keyof 操作符的语法是什么？
   Keyof 操作符的语法为：

   keyof Type
   

   其中 Type 是要获取其属性名称的对象类型。

2. 映射类型的语法是什么？
   映射类型的语法为：

   {
     [key in Type]: ValueType
   }
   

   其中 Type 是要获取其属性名称的对象类型，ValueType 是要映射到的新值类型。

3. 如何使用 Keyof 操作符来提取对象的属性名称？
   可以通过使用以下语法从对象中提取属性名称：

   const keys = keyof ObjectType;
   

   其中 ObjectType 是要从中提取属性名称的对象类型。

4. 如何使用映射类型创建新类型？
   可以通过使用以下语法创建新的映射类型：

   type NewType = {
     [key in OldType]: NewValueType
   };
   

   其中 OldType 是要获取其属性名称的对象类型，NewValueType 是要映射到的新值类型。

5. 如何使用 mapObject 函数将对象的属性名称映射到新值类型？
   mapObject 函数的用法如下：

   const mappedValues = mapObject(obj, (key) => {
     // ...
   });
   

   其中 obj 是要映射其属性名称的对象，key 是对象的属性名称，函数返回要映射到的新值。