TypeScript 映射类型运用

发布时间：2023-03-30 14:02:38 所属栏目：教程来源：

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

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

interface Person{
name: string
age: number
}
type Person

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

先来看这样一个任务：将 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
}

来看它们的实现源码：

type Readonly<T> = {
readonly [K in keyof T]: T[K]
}
type Partial<T> = {
[K in keyof T]?: T[K]
}
源码就使用了映射类型的语法 [K in Keys]，来看这个语法的两个部分：

类型变量 K：它会依次绑定到每个属性，对应每个属性名的类型。
字符串字面量构成的联合类型的 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 }。

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!