在 TypeScript 中，內(nèi)置工具類型（utility types）是一組預(yù)定義的類型，用于在類型層面上進(jìn)行各種操作。對(duì)于 ts 開發(fā)者來說，開始使用這類工具是一個(gè)走出新手村的重要標(biāo)志。截止至 2024 年 8 月，ts 官方共提供了 22 個(gè)內(nèi)置的工具類型。大家可以在官網(wǎng)查看具體的文檔。當(dāng)然，本文并不是來集中介紹這些類型的用法，我們要更近一步，來看看如何用更底層的類型方法來實(shí)現(xiàn)這些工具類型。

Record

我們先從最簡(jiǎn)單的入手

Record<K, T> 將 K 中的每個(gè)屬性值轉(zhuǎn)化為 T 類型，例如：

type Animal = 'Dog' | 'Cat';

type AnimalRecord = Record<Animal, string>;
// type AnimalRecord = {
//     Dog: string;
//     Cat: string;
// }

Record 的實(shí)現(xiàn)如下：

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

type K = keyof any; // string | number | symbol

Record 是最最常用的一個(gè)工具類型，實(shí)現(xiàn)也極其簡(jiǎn)單，只需要用到我們?cè)谏掀谥薪榻B的類型映射。簡(jiǎn)單遍歷第一個(gè)泛型 K 的每一個(gè)屬性，并將屬性值都轉(zhuǎn)成第二個(gè)泛型 T 類型。 這里對(duì) K 做了限制，就是它只能是 string、 number 和 symbol 的一種。我們?cè)俸?jiǎn)單展開一下， keyof any 等價(jià)于聯(lián)合類型string | number | symbol；如果是老手，你可能還會(huì)知道 ts 定義了一個(gè)原生類型 type PropertyKey = string | number | symbol，有時(shí)候偷個(gè)懶不想寫一大串string | number | symbol，可以直接使用PropertyKey秀一把。

Partial & Required & Readonly

Partial<T>： 將 T 的所有屬性變?yōu)榭蛇x，例如：

type Vegetable = {
  Onion: string;
  Garlic: number;
};

type PartialVegetable = Partial<Vegetable>;
// type PartialVegetable = {
//     Onion?: string;
//     Garlic?: number;
// }

Partial 的實(shí)現(xiàn)如下：

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

這里有個(gè)知識(shí)點(diǎn)： 在冒號(hào)前加個(gè) ? （等價(jià)于+?）就表示該鍵值的類型是可選類型（即有可能是 undefined）.

Required<T>： 把所有屬性變成必選

有 +? 操作，自然也有 -?，Required 就是Partial的反向操作：

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


type Vegetable = {
  Onion？: string;
  Garlic？: number;
};

type RequiredVegetable = Required<Vegetable>;
// type RequiredVegetable = {
//     Onion: string;
//     Garlic: number;
// }

Readonly<T>： 將所有屬性變成只讀

類似加減 ? 的操作還有一個(gè)就是：加減 readonly，只不過 readonly 要放在屬性的最前面。

再看看 Readonly 的實(shí)現(xiàn)（這里readonly等價(jià)于+readonly）：

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

正好，我們?cè)僮鰝€(gè)練習(xí)題： Mutable

實(shí)現(xiàn)通用的 Mutable<T>, 使得T中的所有屬性都是可變的(不是只讀的)

interface Todo {
  readonly title: string;
  readonly completed: boolean;
}

type MutableTodo = Mutable<Todo>; // { title: string; completed: boolean; }

很簡(jiǎn)單，-readonly 就行

type Mutable<T extends object> = {
  -readonly [K in keyof T]: T[K];
};

Exclude & Extract & Pick & Omit

我們稍增加一點(diǎn)難度，實(shí)現(xiàn)一些有兩個(gè)泛型的類型

Exclude<T, U>: 從T中剔除那些可賦值給U的類型

Exclude主要用戶聯(lián)合類型的造作。如下所示從聯(lián)合類型 a' | 'b' 中剔除c ( c 是 'a' | 'c'的子集 ) 得到 b

type C = Exclude<'a' | 'b', 'a' | 'c'>; // 'b'

答案很簡(jiǎn)單直接用 extends 判斷就行了：

type Exclude<T, U> = T extends U ? never : T;

不過這里要補(bǔ)充個(gè) extends 的知識(shí)點(diǎn)，

T extends U ? never : T 實(shí)際執(zhí)行時(shí)是對(duì)聯(lián)合類型T里的每一個(gè)元素分別進(jìn)行條件判斷，然后對(duì)每一個(gè)條件判斷的結(jié)果再組裝成新的聯(lián)合類型。以 Exclude<'a' | 'b', 'a' | 'c'> 為例：實(shí)際執(zhí)行時(shí)

1. 等于 ('a' extends 'a' | 'c' ? never : 'a') | ('b' extends 'a' | 'c' ? never: 'b')；
2. 等于 (never) | ('b')；
3. 等于 'b' （任何元素和never的聯(lián)合類型等于其本身）

聯(lián)合類型的條件判斷本質(zhì)上在進(jìn)行“遍歷”，這是個(gè)很有趣的語法特性。我們這里暫不展開了，之后我會(huì)在實(shí)際的案例中解釋如何用這個(gè)特性解決一些需要依靠遍歷來破解的問題。

Extract<T, U>： 從T中提取可賦值給U的類型

Exclude的反向操作就是Extract，就是剔除不包含在U里的類型。這個(gè)太簡(jiǎn)單了，一筆帶過：

type Extract<T, U> = T extends U ? T : never;

Pick<T, K>： 從 T 中，提取出所有鍵值在聯(lián)合類型 K 中的屬性

如下所示，我只想保留 Todo 類型里的 title 和 completed鍵值對(duì)：

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>;
// type TodoPreview = {
//     title: string,
//     completed: boolean
// }

對(duì)Pick<T, K>，這里有兩個(gè)考點(diǎn):

1. K 的取值：K 應(yīng)該是 T 里已經(jīng)存在的鍵值，比如你傳個(gè) hello 需要拋錯(cuò)
2. K 是個(gè)聯(lián)合類型，所以需要遍歷

我們看看實(shí)現(xiàn)：

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

答案還是一個(gè)簡(jiǎn)單的類型映射：

1. 通過 K extends keyof T 限定 K 必須是T的所有鍵值的子集
2. 用個(gè) in 遍歷 K 就行了 （in keyof 不是固定組合……）

Omit<T, K>: 構(gòu)造一個(gè)除類型K以外具有T屬性的類型。

Omit是Pick的反向操作，排除對(duì)象 T 中的 K 鍵值。 Omit在名字上容易和Exclude搞混。記住 Exclude 主要用在聯(lián)合類型，而Omit主要用于對(duì)象類型上。如下所示，我要剔除Todo里的description和title兩個(gè)鍵值對(duì)：

type TodoPreview = Omit<Todo, 'description' | 'title'>;

// type TodoPreview = {
//     completed: false,
// }

Omit<T, K> 對(duì)K沒有特別限制，只需要是正常的JS對(duì)象鍵類型（string | number | symbol）就是了。實(shí)現(xiàn)上正好活用一下上面剛提到的方法類型——Pick和Exclude：

1. 從T的所有鍵中剔除(Exclude)掉聯(lián)合類型K（Exclude<keyof T, K>）
2. 提?。?code>Pick）出所有鍵值在上一步得到的結(jié)果中的屬性

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

小結(jié)

由于篇幅所限，我們暫時(shí)先介紹8個(gè)最簡(jiǎn)單，但又是最貼近實(shí)戰(zhàn)的工具方法。當(dāng)你開始使用這些工具類型時(shí)，你的新手村小伙伴們一定會(huì)眼前一亮的。之后的文章，我會(huì)進(jìn)一步介紹剩下的內(nèi)置工具類型，當(dāng)然他們更加復(fù)雜也更能幫助我們提升認(rèn)知。敬請(qǐng)期待。

文章同步發(fā)布于an-Onion 的 Github。碼字不易，歡迎點(diǎn)贊。