大家好，我是前端西瓜哥，今天來(lái)做做 TS 類型體操。

TypeScript 類型編程

TypeScript 的類型系統(tǒng)，最基本的是簡(jiǎn)單對(duì)應(yīng) JavaScript 的 基本類型，比如 string、number、boolean 等，然后是新增的 tuple、enum、復(fù)合類型、交叉類型、索引類型等 增強(qiáng)類型。

這里會(huì)有一個(gè)問(wèn)題，就是函數(shù)聲明支持不同類型的重復(fù)編寫問(wèn)題，比如我的一個(gè)函數(shù)要接收一個(gè)數(shù)組，然后從中取中一個(gè)元素。

一旦我們傳入的數(shù)組類型不同，都要寫多一個(gè) type 別名，未免太繁瑣。

type getStrItem = (items: string[]) => string;
type getNumItem = (items: number[]) => number;
// ... 每增加一種類型都要寫多了一個(gè) type 別名
const getStrFirst: getStrItem = (a) => {
    return a[0];
}

為解決這個(gè)問(wèn)題，TypeScript 引入了 泛型，讓類型也能成為參數(shù)了。

type getItem<T> = (items: T[]) => T
const getStrFirst: getItem<string> = (a) => {
    return a[0];
}

上面的 T 就是一個(gè)類型參數(shù)，當(dāng)我們通過(guò) 類型別名<具體類型>? 形式（上面代碼對(duì)應(yīng) getItem<string>），我們就能得到一個(gè)具體的類型了。

鑒于 JavaScript 太靈活，TypeScript 實(shí)現(xiàn)的是結(jié)構(gòu)類型系統(tǒng)，我們又覺(jué)得泛型的簡(jiǎn)單推到 T 的粒度還是不夠細(xì)，我們希望能夠獲取 T 內(nèi)部的結(jié)構(gòu)。

于是，TypeScript 在泛型的基礎(chǔ)上，又提供了 類型編程，通過(guò)一些語(yǔ)法，我們可以拿到 T 下更細(xì)粒度的類型，或通過(guò)判斷拿到其他類型。

這個(gè)也被大家戲稱為 類型體操?？赡苁且?yàn)閷?shí)現(xiàn)起來(lái)花里胡哨像是在參加體操大賽的原因。

總結(jié)一下，從類型能力上的增強(qiáng)的過(guò)程來(lái)說(shuō)，就是：

基本類型 -> 泛型 -> 類型編程（類型體操）

TypeScript 內(nèi)置高級(jí)類型

TS 代碼版本為 4.8.2

下面我們來(lái)看一下 TypeScript 內(nèi)置的幾個(gè)高級(jí)類型，它們用了類型編程。

Pick<Type, Keys>

Pick 的作用是，從 T 類型（對(duì)象類型）中，提取出 K（聯(lián)合類型）圈定的 key，返回一個(gè)新的對(duì)象類型。

這里我們通過(guò) Pick 提取了需要的 pos 和 radius 物理信息屬性。

看看 Pick 的實(shí)現(xiàn)：

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

首先我們看等號(hào)左側(cè)的 ??<T, K extends keyof T>??，類型參數(shù)有兩個(gè)，T 和 K。

先說(shuō)類型參數(shù)命名。

類型變量命名和寫 JS 變量一樣，隨意起名。但建議首字母大寫，以防止和一些關(guān)鍵字混淆（比如 extends, as, infer），這些關(guān)鍵詞都是小寫的。

T 通常代表一個(gè)要被分析的類型（Type），K 通常代表對(duì)象屬性名（Key）。就像數(shù)學(xué)中函數(shù)的 x 和 y 一樣，想不到好的命名就用這倆。

keyof 是類型運(yùn)算符，用于提取對(duì)象的屬性（key），然后拼裝成聯(lián)合類型。?

?extends 用于限制類型參數(shù)的范圍。比如 <T extends string> 表示 T 類型必須是 string 的子類，像字面量的 "a" 或 string 都是 string 的子類。如果不是 string 子類，編譯無(wú)法通過(guò)。

還有一種是 extends ? : 的類似 JS 中三元運(yùn)算符的語(yǔ)法，它在等號(hào)的右側(cè)，用于實(shí)現(xiàn)條件判斷。它和前面提到的 extends 不是同一樣?xùn)|西，后面我會(huì)說(shuō)到。

Ok，我們整體看看 <T, K extends keyof T> 代表什么意思。它表示傳入 T 和 K 兩個(gè)類型參數(shù)，然后 K 必須是 T 的屬性組成的聯(lián)合類型中的一部分。

我們?cè)倏纯吹忍?hào)右邊 { [P in K]: T[P]; };，它是對(duì)類型進(jìn)行 重映射。

in 用于對(duì)聯(lián)合類型進(jìn)行遍歷。也就是遍歷我們需要用到的 key，作為索引 P，然后它的值還是用對(duì)應(yīng)的 T[P]。

Exclude<UnionType, ExcludedMembers>

Exclude 的作用是，從聯(lián)合類型中剔除掉一些類型。

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

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

這里涉及到一個(gè)經(jīng)常用到的 條件語(yǔ)法：extends ? :?，你可以把它類比為 JS 中的三元表達(dá)式（即 condition ? a : b）。

為了更好的講解，我們實(shí)現(xiàn)一個(gè)類型 IsNumber，判斷一個(gè)類型是否為數(shù)值類型。

type IsNumber<T> = T extends number ? true : false;
// 使用
type A = IsNumber<1> // true
type B = IsNumber<"str"> // false

T extends number 判斷 T 是否為 number 的子類，如果是的話，返回 true，否則返回 false。

需注意和前面的類型參數(shù)上 extends 是完全不同的東西。

回到我們的 Exclude，邏輯就很清楚了，就是判斷 T 是否為 U 的子類，如果是的話，返回 never（效果是被丟棄）；否則返回 T。

?你是不是有點(diǎn)奇怪結(jié)果，邏輯看起來(lái)不應(yīng)該是 "a" | "b" | "c" 不是 "b" 的子類，返回 "a" | "b" | "c" 嗎？怎么編程了 "a" | "c"？

其實(shí)這是聯(lián)合類型的特殊邏輯，如果聯(lián)合類型使用了 extends，它就會(huì)被打散，變成多個(gè)獨(dú)立的類型進(jìn)行判斷，最后再組合起來(lái)。

所以真正邏輯是， "a" | "b" | "c" 被打散，變成依次判斷 "a" 、"b"、"c" 是否為 "b" 的子類，分別得到  "a" 、never、"c"，然后聯(lián)合起來(lái)，就變成了  "a" | "c"。

ReturnType<Type>

獲取函數(shù)類型的返回值類型。

實(shí)現(xiàn)為：

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

等號(hào)左側(cè)的 (...args: any) => any 代表一個(gè)任意函數(shù)類型，用于限制傳入?yún)?shù)的類型。

然后我們看到了一個(gè)新的關(guān)鍵詞 infer，代表引用的意思，用于類型推導(dǎo)。

extends 和 infer 搭配，可以實(shí)現(xiàn) 模式匹配，如果 extends 匹配成功，infer 就能推導(dǎo)獲得對(duì)應(yīng)的類型。

如果你了解  JS 的正則表達(dá)式，你會(huì)發(fā)現(xiàn)它們很像，infer 好比是捕獲組。

'ABC'.replace(/A(.)C/, '$1') 
// 'B'。提取了模式上匹配的一個(gè)字符串

在 T extends (...args: any) => infer R ? R : any; 中，我們給返回值部分設(shè)置了 infer，并提供了一個(gè)局部變量 R。

如果 extends 條件判斷是繼承關(guān)系，那么變量 R 就會(huì)被賦值函數(shù)的返回值。

后面的判斷為真的分支（? 后面的表達(dá)式）就能拿到這個(gè) R。判斷為假的分支就無(wú)法拿到，因?yàn)槠ヅ涫×恕?/p>

這個(gè) extends + infer 其實(shí)就是類型體操的精髓，可以在傳入類型 T 繼續(xù)拆分，拿到更細(xì)粒度的類型。

更多類型體操學(xué)習(xí)

還有更多的類型編程的技巧因?yàn)槠蚓筒徽f(shuō)了，比如還有：

• as 運(yùn)算符可以做類型索引的重映射。
• 通過(guò)數(shù)組的 "length" 可以實(shí)現(xiàn)數(shù)字運(yùn)算。
• 通過(guò)遞歸實(shí)現(xiàn)循環(huán)邏輯。
• 一些特殊的類型（）的處理等。

TypeScript 的類型是圖靈完備的，可以實(shí)現(xiàn)各種判斷、循環(huán)、加減的邏輯。當(dāng)然某些邏輯實(shí)現(xiàn)起來(lái)很繁瑣就是了。

它的語(yǔ)法也是與眾不同：它做了 “壓縮”。一個(gè)類型的編程只是一個(gè)表達(dá)式，需要用 extend ? : 的方式不停嵌套實(shí)現(xiàn)邏輯。TS 類型體操學(xué)起來(lái)，某種意義上確實(shí)有點(diǎn)像學(xué)一門新的語(yǔ)言，而且有那么一點(diǎn)古怪。

我曾懷揣著成為類型體操運(yùn)動(dòng)員，去看官方文檔，發(fā)現(xiàn)文檔很細(xì)碎，而且也是英文，學(xué)起來(lái)磕磕絆絆，很快就放棄了。

心里不禁嘀咕：類型體操好難學(xué)啊，一團(tuán)亂麻。

我就想，有沒(méi)有什么優(yōu)秀的關(guān)于類型體操的課程呢？

直到最近我發(fā)現(xiàn)了，掘金推出的課程：《TypeScript 類型體操通關(guān)秘籍》，也不算新課了，但寫得確實(shí)好。

這是我覺(jué)得類型體操寫得最好的課程，共 24 節(jié)，只需要 29.9。

這性價(jià)比可太高了，這課程要是我出的，要是這質(zhì)量我可得賣 99.9。