22.【TypeScript 教程】映射类型

TypeScript 映射类型

TypeScript 会将一些好用的工具类型纳入基准库中，方便开发者直接使用，本节介绍的映射类型就是这样的工具类型。

对这种工具类型，我们不只要知道使用方法，还要了解其实现功能的本质。本节我们会从源码进行分析，逐步掌握。

1. 解释

映射类型可以将已知类型的每个属性都变为可选的或者只读的。

2. Readonly 与 Partial 关键字

先来看这样一个任务：将 Person 接口的每个属性都变为可选属性或者只读属性。

interface Person{
  name: string
  age: number
}
 
type PersonOptional = Partial<Person>
type PersonReadonly = Readonly<Person>

代码解释：

第 6 行，通过 Partial<Person> 这样的语法格式得到类型别名 PersonOptional，等价于：

type PersonOptional = {
  name?: string
  age?: number
}

第 7 行，通过 Readonly<Person> 这样的语法格式得到类型别名 PersonReadonly，等价于：

type PersonReadonly = {
  readonly name: string
  readonly age: number
}

3. 两个关键字的源码分析

来看它们的实现源码：

type Readonly<T> = {
  readonly [K in keyof T]: T[K]
}
type Partial<T> = {
  [K in keyof T]?: T[K]
}

源码就使用了映射类型的语法 [K in Keys]，来看这个语法的两个部分：

1. 类型变量 K：它会依次绑定到每个属性，对应每个属性名的类型。
2. 字符串字面量构成的联合类型的 Keys：它包含了要迭代的属性名的集合。

我们可以使用 for...in 来理解，它可以遍历目标对象的属性。

接下来继续分析：

Keys，可以通过 keyof 关键字取得，假设传入的类型是泛型 T，得到 keyof T，即为字符串字面量构成的联合类型（"name" | "age"）。

[K in keyof T]，将属性名一一映射出来。

• T[K]，得到属性值的类型。

已知了这些信息，我们就得到了将一个对象所有属性变为可选属性的方法：

[K in keyof T]?: T[K]

进而可得：

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

Readonly<T> 和 Partial<T> 都有着广泛的用途，因此它们与 Pick 一同被包含进了 TypeScript 的标准库里：

type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}
 
interface User {
  id: number
  age: number
  name: string
}
 
type PickUser = Pick<User, 'id'>

代码解释：

最后一行，就相当于 type PickUser = { id: number }。

4. 小结

映射类型的语法是 [K in Keys]，比较简单，但是由此我们分析了几个 TypeScript 标准库中好用的工具类型。TypeScript 中工具类型有很多，感兴趣的同学可以深入了解一下。