就像 JavaScript 的高階函數是生成函數的函數，React 的高階組件是生成組件的組件壹樣，Typescript 的高級類型就是生成類型的類型。
TypeScript 高級類型是通過 type 定義的有類型參數（也叫泛型）的類型，它會對傳入的類型參數做壹系列的類型計算，產生新的類型。
type Pick = {
[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 支持構造新的字符串：
圖片
也支持根據模式匹配來取字符串中的某壹部分：
圖片
ts 類型的對象操作
ts 支持對對象取屬性、取值：
圖片
也可以創建新的對象類型：
圖片
通過 keyof 取出 obj 的所有屬性名，通過 in 遍歷屬性名並取對應的屬性值，通過這些來生成新的對象類型 newObj。
我們過了壹下常用的 ts 類型的語法，包括條件判斷、循環（用遞歸實現）、字符串操作（構造字符串、取某部分子串）、對象操作（構造對象、取屬性值）。接下來就用這些來做操吧。
ts 類型體操練習
我們把體操分為 3 類來練習，之後再分別總結規律。
數字類的類型體操
體操 1：實現高級類型 Add，能夠做數字加法。
ts 類型能做數字加法麽？肯定可以的，因為它是圖靈完備的，也就是各種可計算邏輯都可以做。
那怎麽做呢？
數組類型可以取 length 屬性，那不就是個數字麽。可以通過構造壹定長度的數組來實現加法。
上文我們實現了通過遞歸的方式實現了構造壹定長度的新數組的高級類型：
type createArray = Arr['length'] extends Len ? Arr : createArray
那只要分別構造兩個不同長度的數組，然後合並到壹起，再取 length 就行了。
type Add = [...createArray, ...createArray ]['length']
我們測試下：
圖片
我們通過構造數組的方式實現了加法！
小結下：ts 的高級類型想做數字的運算只能用構造不同長度的數組再取 length 的方式，因為沒有類型的加減乘除運算符。
字符串類的體操
體操2：把字符串重復 n 次。
字符串的構造我們前面學過了，就是通過 ${A}${B} 的方式，那只要做下計數，判斷下重復次數就行了。
計數涉及到了數字運算，要通過構造數組再取 length 的方式。
所以，我們要遞歸的構造數組來計數，並且遞歸的構造字符串，然後判斷數組長度達到目標就返回構造的字符串。
所以有 Str（待重復的字符串）、Count（重復次數）、Arr（用於計數的數組）、ResStr（構造出的字符串）四個類型參數：
type RepeactStr<str p="" string,
Count,
Arr extends Str[] = [],
ResStr extends string = ''>
= Arr['length'] extends Count
? ResStr
: RepeactStr ;
我們遞歸的構造了數組和字符串，判斷構造的數組的 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: Token,
rest: Rest
}
然後就壹個個取字符來判斷，把取到的字符構造成字符串存入中間結果：
type parseFunctionName
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends alphaChars
? parseFunctionName
: TempParseResult
: never;
我們取了單個字符，然後判斷是否是字母，是的話就把取到的字符構造成新的字符串，然後繼續遞歸取剩余的字符串。
測試壹下：
圖片
圖片
符合我們的需求，我們通過模式匹配取子串的方式解析出了函數名。
然後繼續解析剩下的。
解析括號
括號的匹配也是同樣的方式，而且括號只有壹個字符，不需要遞歸的取，取壹次就行。
type brackets = '(' | ')';
type parseBrackets
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends brackets
? TempParseResult
: never
: never;
測試壹下：
圖片
繼續解析剩下的：
解析數字
數字的解析也是壹個字符壹個字符的取，判斷是否匹配，匹配的話就遞歸取下壹個字符，直到不匹配：
type numChars = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type parseNum
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends numChars
? parseNum
: TempParseResult
: never;
測試壹下：
圖片
繼續解析剩下的：
解析逗號
逗號和括號壹樣，只需要取壹個字符判斷即可，不需要遞歸。
type parseComma
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends ','
? TempParseResult
: never
: never;
測試壹下：
圖片
至此，我們完成了所有的字符的解析，解析來按照順序組織起來就行。
整體解析
單個 token 的解析都做完了，整體解析就是組織下順序，每次解析完拿到剩余的字符串傳入下壹個解析邏輯，全部解析完，就可以拿到各種信息。
type parse
= parseFunctionName extends TempParseResult
? parseBrackets extends TempParseResult
? parseNum extends TempParseResult
? parseComma extends TempParseResult
? parseNum extends TempParseResult
? parseBrackets extends TempParseResult
? {
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: Token,
rest: Rest
}
type parseFunctionName =
SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends alphaChars
? parseFunctionName
: TempParseResult
: never;
type brackets = '(' | ')';
type parseBrackets
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends brackets
? TempParseResult
: never
: never;
type parseNum
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends numChars
? parseNum
: TempParseResult
: never;
type parseComma
= SourceStr extends `${infer PrefixChar}${infer RestStr}`
? PrefixChar extends ','
? TempParseResult
: never
: never;
type parse
= parseFunctionName extends TempParseResult
? parseBrackets extends TempParseResult
? parseNum extends TempParseResult
? parseComma extends TempParseResult
? parseNum extends TempParseResult
? parseBrackets extends TempParseResult
? {
functionName: FunctionName,
params: [Num1, Num2],
}: never: never: never: never : never : never;
type res = parse;
對象類的體操
體操4：實現高級類型，取出對象類型中的數字屬性值
構造對象、取屬性名、取屬性值的語法上文學過了，這裏組合下就行：
type filterNumberProp = {
[Key in keyof T] : T[Key] extends number ? T[Key] : never
}[keyof T];
我們構造壹個新的對象類型，通過 keyof 遍歷對象的屬性名，然後對屬性值做判斷，如果不是數字就返回 never，然後再取屬性值。
屬性值返回 never 就代表這個屬性不存在，就能達到過濾的效果。
測試壹下：
圖片
小結：對象類型可以通過 {} 構造新對象，通過 [] 取屬性值，通過 keyof 遍歷屬性名，綜合這些語法就可以實現各種對象類型的邏輯。
總結
TypeScript 給 JavaScript 擴展了類型的語法，而且還支持了高級類型來生成類型。
TypeScript 的類型系統是圖靈完備的，可以描述任何可計算邏輯：
有 ? : 可以做條件判斷，常配合 extends 使用
通過遞歸可以實現循環
可以做對象的構造 {}、取屬性名 keyof、取屬性值 T[Key]
可以做字符串的構造 ${a}${b}，字符串的模式匹配來取子串 str extends ${infer x}${infer y}
我們分別做了這些類型體操：
ts 實現加法：通過遞歸構造數組再取長度
ts 實現重復字符串：遞歸構造數組來計數，然後遞歸構造字符串
ts 實現 parser：通過字符串模式匹配取子串的方式來解析每壹部分，最後組合調用
ts 實現對象屬性過濾：通過構造對象、取屬性名、取值的語法組合調用
其中要註意的就是數字類的要通過構造數組取長度的方式來計算，再就是字符串的模式匹配結合 infer 保存中間結果來取子串，這兩個是相對難度大壹些的。
其實各種高級類型，只要熟悉了 ts 類型語法，想清楚了邏輯就能壹步步寫出來，和寫 JS 邏輯沒啥本質區別，只不過它是用於生成類型的邏輯。
讀到這裏，是不是感覺高級類型的類型體操也沒有啥難度了呢？