您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

TypeScript 映射类型

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

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

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

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

interface Person{
  name: string
  age: number
}

type PersonOptional @H__49@= Partial@H__49@<Person@H__49@>
type PersonReadonly @H__49@= Readonly@H__49@<Person@H__49@>

解释:

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

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

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

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

来看它们的实现源码:

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

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

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

接下来继续分析:

已知了这些信息,我们就得到了将对象所有变为可选的:

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

进而可得:

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

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

type Pick@H__49@<T, K extends keyof T@H__49@> @H__49@= {
  [P in K]: T[P]
}

interface User {
  id: number
  age: number
  name: string
}

type PickUser @H__49@= Pick@H__49@<User, 'id'@H__49@>

解释:

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

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


联系我
置顶