TypeScript 給 JavaScript 加了套靜態(tài)類型系統(tǒng)。其中，JavaScript 中的數(shù)組、對(duì)象等聚合多個(gè)元素的類型在 TypeScript 中對(duì)應(yīng)的是索引類型。

比如這就是一個(gè)索引類型：

type obj = {
  name: string;
  age: number;
  gender: boolean;
}

索引類型可以添加修飾符 readonly(只讀)、?(可選):

type obj = {
  readonly name: string;
  age?: number;
  gender: boolean;
}

我們知道，TypeScript 支持類型編程，也就是對(duì)類型參數(shù)(范型)做各種運(yùn)算，產(chǎn)生新的類型：

type IsString<T> = T extends string ? true: false;

那么對(duì)于索引類型，如何做運(yùn)算并產(chǎn)生新的類型呢?

答案是映射類型。

映射類型

映射類型就是用于構(gòu)造新的索引類型的。

比如這個(gè) Record 類型：

type Record<
  K extends string | number | symbol, 
  T> = 
{ [P in K]: T; }

Record 類型構(gòu)造了一個(gè) key 為 stirng 或 number 或 symbol，而 value 為類型 T 的索引類型。它是 TS 內(nèi)置的高級(jí)類型。

在構(gòu)造新的索引類型的過程中，還可以做加上一些修飾符。

比如 ReadOnly:

type Readonly<T> =  {
  readonly [Key in keyof T]: T[Key];
}

它創(chuàng)建了一個(gè)新的索引類型，在原來索引類型的每個(gè)屬性上加上了 readonly 的修飾：

比如 Partial：

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

它創(chuàng)建了一個(gè)新的索引類型，在原來索引類型的每個(gè)屬性上加上了 ? 的修飾：

可以加上，當(dāng)然也可以去掉：

去掉可選(?)：

type Required<T> = {
  [Key in keyof T]-?: T[Key]
}

去掉 readonly：

type NotReadOnly<T> = {
  -readonly [Key in keyof T]: T[Key]
}

過完這些例子，映射類型能干什么就比較清楚了：

映射類型可以生成新的索引類型，在生成過程中可以加上或去掉 readonly、? 的修飾符。內(nèi)置的 Record、ReadOnly、Required、Partial 等類型都是映射類型。

但是，現(xiàn)在的映射類型還是有局限性的，不能對(duì)索引名做修改、過濾等操作，功能還不夠強(qiáng)。

如果想實(shí)現(xiàn)過濾、轉(zhuǎn)換，那就得用到映射類型的重映射了。

重映射

重映射就是在索引后加一個(gè) as 語句，表明索引轉(zhuǎn)換成什么，它可以用來對(duì)索引類型做過濾和轉(zhuǎn)換。

比如過濾出類型為 string 的索引：

type FilterString<T> = {
  [Key in keyof T as T[Key] extends string ? Key: never]: T[Key];
}

返回 never 代表過濾掉，否則保留。

還可以對(duì)索引做轉(zhuǎn)換，比如修改索引名，加上 get：

type Getters<T extends Record<any, any>> = {
  [Key in keyof T as `get${Capitalize<Key & string>}`]: T[Key];
}

T extends xxx 是給類型參數(shù)的約束，表示只能傳入這種類型。這里的 Record 類型是生成索引類型的，我們上面介紹過，所以 T extends Record 就是約束了這里只能傳入索引類型。

as 后面是把索引轉(zhuǎn)換成什么，我們是在原來的基礎(chǔ)上做了修改，加上了 get，并且后面內(nèi)容首字母大寫，這個(gè) Capitalize 也是 TS 內(nèi)置的類型。

效果如下：

這兩個(gè)例子分別說明了重映射 as 可以用來做索引類型的過濾和轉(zhuǎn)換，可以對(duì)索引類型做更靈活的編程。

比如，實(shí)現(xiàn) key 和 value 的互換：

type Flip<T extends Record<any, any>> = {
  [Key in keyof T as `${T[Key]}`]: Key
}

支持重映射之后，映射類型可以對(duì)索引類型做更多的修改。

總結(jié)

TypeScript 通過索引類型來表示有多個(gè)元素的聚合類型，比如數(shù)組、對(duì)象等。

TS 支持類型編程，也就是對(duì)類型參數(shù)做各種運(yùn)算然后返回新的類型。對(duì)索引類型當(dāng)然也可以做運(yùn)算，對(duì)應(yīng)的類型就是映射類型。

映射類型在生成新的索引類型的過程中，還可以加上或去掉 readonly、?的修飾符。內(nèi)置的 Record、Required、Partial、ReadOnly 都是映射類型。

如果想對(duì)索引類型做進(jìn)一步的過濾和轉(zhuǎn)換，就需要用到 as 的重映射，它可以對(duì)索引做修改(當(dāng)索引為 never 就代表過濾掉該索引)。

會(huì)用索引類型是只是基礎(chǔ)，會(huì)用映射類型和重映射就是進(jìn)階內(nèi)容了，這部分可以寫出很多復(fù)雜的類型邏輯，屬于類型體操的范疇。