來做操吧！深入 TypeScript 高級類型和類型體操

TypeScript 給 JavaScript 擴展了類型的語法，我們可以給變量加上類型，在編譯期間會做類型檢查，配合編輯器還能做更準確的智能提示。此外，TypeScript 還支持了高級類型用於增加類型系統的靈活性。

就像 JavaScript 的高階函數是生成函數的函數，React 的高階組件是生成組件的組件一樣，Typescript 的高級類型就是生成類型的類型。

TypeScript 高級類型是通過 type 定義的有類型參數（也叫泛型）的類型，它會對傳入的類型參數做一系列的類型計算，產生新的類型。

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

比如，這個 Pick 就是一個高級類型，它有類型參數 T 和 K，類型參數經過一系列的類型計算邏輯，會返回新的類型。

TypeScript 高級類型會根據類型參數求出新的類型，這個過程會涉及一系列的類型計算邏輯，這些類型計算邏輯就叫做類型體操。當然，這並不是一個正式的概念，只是社區的戲稱，因爲有的類型計算邏輯是比較複雜的。

TypeScript 的類型系統是圖靈完備的，也就是說它能描述任何可計算邏輯，簡單點來說就是循環、條件判斷等該有的語法都有。

既然 TypeScript 的類型系統這麼強，那我們就做一些高級類型的類型體操來感受下吧。

我們會做這些體操：

• 用 ts 類型實現加法

• 用 ts 類型生成重複 N 次的字符串

• 用 ts 類型實現簡易的 js parser（部分）

• 用 ts 類型實現對象屬性按條件過濾

我把這些體操分爲數字類的、字符串類的、對象類的，把這三種類型計算邏輯的規律掌握了，相信你的體操水平會提升一截。

TypeScript 類型語法基礎

在做體操之前，要先過一下 TypeScript 的類型語法，也就是能做哪些類型計算邏輯。

既然說該有的語法都有，那我們來看下循環和判斷都怎麼做：

ts 類型的條件判斷

ts 類型的條件判斷的語法是 條件 ? 分支1 : 分支2 。

extends 關鍵字是用於判斷 A 是否是 B 類型的。例子中傳入的類型參數 T 是 1，是 number 類型，所以最終返回的是 true。

ts 類型的循環

ts 類型沒有循環，但可以用遞歸來實現循環。

我們要構造一個長度爲 n 的數組，那麼就要傳入長度的類型參數 Len、元素的類型參數 Ele、以及構造出的數組的類型參數 Arr（用於遞歸）。

然後類型計算邏輯就是判斷 Arr 的 length 是否是 Len，如果是的話，就返回構造出的 Arr，不是的話就往其中添加一個元素繼續構造。

這樣，我們就遞歸的創建了一個長度爲 Len 的數組。

ts 類型的字符串操作

ts 支持構造新的字符串：

也支持根據模式匹配來取字符串中的某一部分：

因爲 str 符合 aaa, 的模式，所以能夠匹配上，把右邊的部分放入通過 infer 聲明的局部類型變量裏，之後取該局部變量的值返回。

ts 類型的對象操作

ts 支持對對象取屬性、取值：

也可以創建新的對象類型：

通過 keyof 取出 obj 的所有屬性名，通過 in 遍歷屬性名並取對應的屬性值，通過這些來生成新的對象類型 newObj。

我們過了一下常用的 ts 類型的語法，包括條件判斷、循環（用遞歸實現）、字符串操作（構造字符串、取某部分子串）、對象操作（構造對象、取屬性值）。接下來就用這些來做操吧。

ts 類型體操練習

我們把體操分爲 3 類來練習，之後再分別總結規律。

數字類的類型體操

體操 1：實現高級類型 Add，能夠做數字加法。

ts 類型能做數字加法麼？肯定可以的，因爲它是圖靈完備的，也就是各種可計算邏輯都可以做。

那怎麼做呢？

數組類型可以取 length 屬性，那不就是個數字麼。可以通過構造一定長度的數組來實現加法。

上文我們實現了通過遞歸的方式實現了構造一定長度的新數組的高級類型：

type createArray<Len, Ele, Arr extends Ele[] = []> =  Arr['length'] extends Len ? Arr : createArray<Len, Ele, [Ele, ...Arr]>

那隻要分別構造兩個不同長度的數組，然後合併到一起，再取 length 就行了。

type Add<A extends number, B extends number> = [...createArray<A, 1>, ...createArray<B, 1>]['length']

我們測試下：

我們通過構造數組的方式實現了加法！

小結下：ts 的高級類型想做數字的運算只能用構造不同長度的數組再取 length 的方式，因爲沒有類型的加減乘除運算符。

字符串類的體操

體操 2：把字符串重複 n 次。

字符串的構造我們前面學過了，就是通過 ${A}${B} 的方式，那隻要做下計數，判斷下重複次數就行了。

計數涉及到了數字運算，要通過構造數組再取 length 的方式。

所以，我們要遞歸的構造數組來計數，並且遞歸的構造字符串，然後判斷數組長度達到目標就返回構造的字符串。

所以有 Str（待重複的字符串）、Count（重複次數）、Arr（用於計數的數組）、ResStr（構造出的字符串）四個類型參數：

type RepeactStr<Str extends string,
                Count, 
                Arr extends Str[] = [],
                ResStr extends string = ''> 
 = Arr['length'] extends Count 
 ? ResStr 
 : RepeactStr<Str,Count, [Str, ...Arr], `${Str}${ResStr}`>;

我們遞歸的構造了數組和字符串，判斷構造的數組的 length 如果到了 Count，就返回構造的字符串 ResStr，否則繼續遞歸構造。

測試一下：

小結：遞歸構造字符串的時候要通過遞歸構造數組來做計數，直到計數滿足條件，就生成了目標的字符串。

這個體操只用到了構造字符串，沒用到字符串通過模式匹配取子串，我們再做一個體操。

體操 3: 實現簡易的 JS Parser，能解析字符串 add(11,22) 的函數名和參數

字符串的解析需要根據模式匹配取子串。這裏要分別解析函數名（functionName）、括號（brackets）、數字（num）、逗號（comma），我們分別實現相應的高級類型。

解析函數名

函數名是由字母構成，我們只要一個個字符一個字符的取，判斷是否爲字母，是的話就記錄下該字符，然後對剩下的字符串遞歸進行同樣的處理，直到不爲字母的字符，通過這樣的方式就能取出函數名。

我們先定義字母的類型：

type alphaChars = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm'
    | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z'
    | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M'
    | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

還有保存中間結果的類型：

type TempParseResult<Token extends string, Rest extends string> = {
    token: Token,
    rest: Rest
}

然後就一個個取字符來判斷，把取到的字符構造成字符串存入中間結果：

type parseFunctionName<SourceStr extends string, Res extends string = ''> 
  = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends alphaChars 
    ?  parseFunctionName<RestStr, `${Res}${PrefixChar}`> 
    : TempParseResult<Res, SourceStr> 
    : never;

我們取了單個字符，然後判斷是否是字母，是的話就把取到的字符構造成新的字符串，然後繼續遞歸取剩餘的字符串。

測試一下：

符合我們的需求，我們通過模式匹配取子串的方式解析出了函數名。

然後繼續解析剩下的。

解析括號

括號的匹配也是同樣的方式，而且括號只有一個字符，不需要遞歸的取，取一次就行。

type brackets = '(' | ')';
type parseBrackets<SourceStr> 
    = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends brackets 
    ?  TempParseResult<PrefixChar, RestStr> 
    : never 
    : never;

測試一下：

繼續解析剩下的：

解析數字

數字的解析也是一個字符一個字符的取，判斷是否匹配，匹配的話就遞歸取下一個字符，直到不匹配：

type numChars = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';

type parseNum<SourceStr extends string, Res extends string = ''> 
    = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends numChars 
    ? parseNum<RestStr, `${Res}${PrefixChar}`> 
    : TempParseResult<Res, SourceStr> 
    : never;

測試一下：

繼續解析剩下的：

解析逗號

逗號和括號一樣，只需要取一個字符判斷即可，不需要遞歸。

type parseComma<SourceStr extends string> 
    = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends ',' 
    ?  TempParseResult<',', RestStr> 
    : never 
    : never;

測試一下：

至此，我們完成了所有的字符的解析，解析來按照順序組織起來就行。

整體解析

單個 token 的解析都做完了，整體解析就是組織下順序，每次解析完拿到剩餘的字符串傳入下一個解析邏輯，全部解析完，就可以拿到各種信息。

type parse<SourceStr extends string, Res extends string = ''> 
    = parseFunctionName<SourceStr, Res> extends TempParseResult<infer FunctionName, infer Rest1> 
    ? parseBrackets<Rest1> extends TempParseResult<infer BracketChar, infer Rest2> 
    ? parseNum<Rest2> extends TempParseResult<infer Num1, infer Rest3> 
    ? parseComma<Rest3>  extends TempParseResult<infer CommaChar, infer Rest4> 
    ? parseNum<Rest4>  extends TempParseResult<infer Num2, infer Rest5> 
    ? parseBrackets<Rest5>  extends TempParseResult<infer BracketChar2, infer Rest6> 
    ? {
        functionName: FunctionName,
        params: [Num1, Num2],
    }: never: never: never: never : never : never;

測試一下：

大功告成，我們用 ts 類型實現了簡易的 parser！

小結：ts 類型可以通過模式匹配的方式取出子串，我們通過一個字符一個字符的取然後判斷的方式，遞歸的拆分 token，然後按照順序拆分出 token，就能實現字符串的解析。

完整代碼如下：

type numChars = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type alphaChars = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' | 'l' | 'm'
    | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' | 'y' | 'z'
    | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M'
    | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

type TempParseResult<Token extends string, Rest extends string> = {
    token: Token,
    rest: Rest
}

type parseFunctionName<SourceStr extends string, Res extends string = ''> = 
    SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends alphaChars 
    ?  parseFunctionName<RestStr, `${Res}${PrefixChar}`> 
    : TempParseResult<Res, SourceStr> 
    : never;

type brackets = '(' | ')';
type parseBrackets<SourceStr> 
    = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends brackets 
    ?  TempParseResult<PrefixChar, RestStr> 
    : never 
    : never;

type parseNum<SourceStr extends string, Res extends string = ''> 
    = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends numChars 
    ? parseNum<RestStr, `${Res}${PrefixChar}`> 
    : TempParseResult<Res, SourceStr> 
    : never;

type parseComma<SourceStr extends string> 
    = SourceStr extends `${infer PrefixChar}${infer RestStr}` 
    ?  PrefixChar extends ',' 
    ?  TempParseResult<',', RestStr> 
    : never 
    : never;

type parse<SourceStr extends string, Res extends string = ''> 
    = parseFunctionName<SourceStr, Res> extends TempParseResult<infer FunctionName, infer Rest1> 
    ? parseBrackets<Rest1> extends TempParseResult<infer BracketChar, infer Rest2> 
    ? parseNum<Rest2> extends TempParseResult<infer Num1, infer Rest3> 
    ? parseComma<Rest3>  extends TempParseResult<infer CommaChar, infer Rest4> 
    ? parseNum<Rest4>  extends TempParseResult<infer Num2, infer Rest5> 
    ? parseBrackets<Rest5>  extends TempParseResult<infer BracketChar2, infer Rest6> 
    ? {
        functionName: FunctionName,
        params: [Num1, Num2],
    }: never: never: never: never : never : never;
    
type res = parse<'add(11,2)'>;

對象類的體操

體操 4：實現高級類型，取出對象類型中的數字屬性值

構造對象、取屬性名、取屬性值的語法上文學過了，這裏組合下就行：

type filterNumberProp<T extends Object> = { 
    [Key in keyof T] : T[Key] extends number ? T[Key] : never
 }[keyof T];

我們構造一個新的對象類型，通過 keyof 遍歷對象的屬性名，然後對屬性值做判斷，如果不是數字就返回 never，然後再取屬性值。

屬性值返回 never 就代表這個屬性不存在，就能達到過濾的效果。

測試一下：

小結：對象類型可以通過 {} 構造新對象，通過 [] 取屬性值，通過 keyof 遍歷屬性名，綜合這些語法就可以實現各種對象類型的邏輯。

總結

TypeScript 給 JavaScript 擴展了類型的語法，而且還支持了高級類型來生成類型。

高級類型是通過 type 聲明的帶有類型參數的類型，類型參數也叫泛型。根據類型參數生成最終類型的類型計算邏輯被戲稱爲類型體操。

TypeScript 的類型系統是圖靈完備的，可以描述任何可計算邏輯：

• 有 ? : 可以做條件判斷，常配合 extends 使用

• 通過遞歸可以實現循環

• 可以做對象的構造 {}、取屬性名 keyof、取屬性值 T[Key]

• 可以做字符串的構造 ${a}${b}，字符串的模式匹配來取子串 str extends ${infer x}${infer y}

我們分別做了這些類型體操：

• ts 實現加法：通過遞歸構造數組再取長度

• ts 實現重複字符串：遞歸構造數組來計數，然後遞歸構造字符串

• ts 實現 parser：通過字符串模式匹配取子串的方式來解析每一部分，最後組合調用

• ts 實現對象屬性過濾：通過構造對象、取屬性名、取值的語法組合調用

其中要注意的就是數字類的要通過構造數組取長度的方式來計算，再就是字符串的模式匹配結合 infer 保存中間結果來取子串，這兩個是相對難度大一些的。

其實各種高級類型，只要熟悉了 ts 類型語法，想清楚了邏輯就能一步步寫出來，和寫 JS 邏輯沒啥本質區別，只不過它是用於生成類型的邏輯。

讀到這裏，是不是感覺高級類型的類型體操也沒有啥難度了呢？

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/z5N3ePnhAo4liYaZLfwtog