來做操吧！深入 TypeScript 高級類型和類型體操
TypeScript 給 JavaScript 擴(kuò)展了類型的語法，我們可以給變量加上類型，在編譯期間會做類型檢查，配合編輯器還能做更準(zhǔn)確的智能提示。此外，TypeScript 還支持了高級類型用于增加類型系統(tǒng)的靈活性。
就像 JavaScript 的高階函數(shù)是生成函數(shù)的函數(shù)，React 的高階組件是生成組件的組件一樣，Typescript 的高級類型就是生成類型的類型。
TypeScript 高級類型是通過 type 定義的有類型參數(shù)(也叫泛型)的類型，它會對傳入的類型參數(shù)做一系列的類型計(jì)算，產(chǎn)生新的類型。
- type Pick<T, K extends keyof T> = {
- [P in K]: T[P];
- };
比如，這個(gè) Pick 就是一個(gè)高級類型，它有類型參數(shù) T 和 K，類型參數(shù)經(jīng)過一系列的類型計(jì)算邏輯，會返回新的類型。
TypeScript 高級類型會根據(jù)類型參數(shù)求出新的類型，這個(gè)過程會涉及一系列的類型計(jì)算邏輯，這些類型計(jì)算邏輯就叫做類型體操。當(dāng)然，這并不是一個(gè)正式的概念，只是社區(qū)的戲稱，因?yàn)橛械念愋陀?jì)算邏輯是比較復(fù)雜的。
TypeScript 的類型系統(tǒng)是圖靈完備的，也就是說它能描述任何可計(jì)算邏輯，簡單點(diǎn)來說就是循環(huán)、條件判斷等該有的語法都有。
既然 TypeScript 的類型系統(tǒng)這么強(qiáng)，那我們就做一些高級類型的類型體操來感受下吧。
我們會做這些體操：
- 用 ts 類型實(shí)現(xiàn)加法
- 用 ts 類型生成重復(fù) N 次的字符串
- 用 ts 類型實(shí)現(xiàn)簡易的 js parser(部分)
- 用 ts 類型實(shí)現(xiàn)對象屬性按條件過濾
我把這些體操分為數(shù)字類的、字符串類的、對象類的，把這三種類型計(jì)算邏輯的規(guī)律掌握了，相信你的體操水平會提升一截。
TypeScript 類型語法基礎(chǔ)
在做體操之前，要先過一下 TypeScript 的類型語法，也就是能做哪些類型計(jì)算邏輯。
既然說該有的語法都有，那我們來看下循環(huán)和判斷都怎么做：
ts 類型的條件判斷
ts 類型的條件判斷的語法是 條件 ? 分支1 : 分支2 。
extends 關(guān)鍵字是用于判斷 A 是否是 B 類型的。例子中傳入的類型參數(shù) T 是 1，是 number 類型，所以最終返回的是 true。
ts 類型的循環(huán)
ts 類型沒有循環(huán)，但可以用遞歸來實(shí)現(xiàn)循環(huán)。
我們要構(gòu)造一個(gè)長度為 n 的數(shù)組，那么就要傳入長度的類型參數(shù) Len、元素的類型參數(shù) Ele、以及構(gòu)造出的數(shù)組的類型參數(shù) Arr(用于遞歸)。
然后類型計(jì)算邏輯就是判斷 Arr 的 length 是否是 Len，如果是的話，就返回構(gòu)造出的 Arr，不是的話就往其中添加一個(gè)元素繼續(xù)構(gòu)造。
這樣，我們就遞歸的創(chuàng)建了一個(gè)長度為 Len 的數(shù)組。
ts 類型的字符串操作
ts 支持構(gòu)造新的字符串：
也支持根據(jù)模式匹配來取字符串中的某一部分：
因?yàn)?str 符合 aaa, 的模式，所以能夠匹配上，把右邊的部分放入通過 infer 聲明的局部類型變量里，之后取該局部變量的值返回。
ts 類型的對象操作ts 支持對對象取屬性、取值：
也可以創(chuàng)建新的對象類型：
通過 keyof 取出 obj 的所有屬性名，通過 in 遍歷屬性名并取對應(yīng)的屬性值，通過這些來生成新的對象類型 newObj。
我們過了一下常用的 ts 類型的語法，包括條件判斷、循環(huán)(用遞歸實(shí)現(xiàn))、字符串操作(構(gòu)造字符串、取某部分子串)、對象操作(構(gòu)造對象、取屬性值)。接下來就用這些來做操吧。
ts 類型體操練習(xí)
我們把體操分為 3 類來練習(xí)，之后再分別總結(jié)規(guī)律。
數(shù)字類的類型體操
體操 1：實(shí)現(xiàn)高級類型 Add，能夠做數(shù)字加法。
ts 類型能做數(shù)字加法么?肯定可以的，因?yàn)樗菆D靈完備的，也就是各種可計(jì)算邏輯都可以做。
那怎么做呢?
數(shù)組類型可以取 length 屬性，那不就是個(gè)數(shù)字么?？梢酝ㄟ^構(gòu)造一定長度的數(shù)組來實(shí)現(xiàn)加法。
上文我們實(shí)現(xiàn)了通過遞歸的方式實(shí)現(xiàn)了構(gòu)造一定長度的新數(shù)組的高級類型：
- type createArray<Len, Ele, Arr extends Ele[] = []> = Arr['length'] extends Len ? Arr : createArray<Len, Ele, [Ele, ...Arr]>
那只要分別構(gòu)造兩個(gè)不同長度的數(shù)組，然后合并到一起，再取 length 就行了。
- type Add<A extends number, B extends number> = [...createArray<A, 1>, ...createArray<B, 1>]['length']
我們測試下：
我們通過構(gòu)造數(shù)組的方式實(shí)現(xiàn)了加法!
小結(jié)下：ts 的高級類型想做數(shù)字的運(yùn)算只能用構(gòu)造不同長度的數(shù)組再取 length 的方式，因?yàn)闆]有類型的加減乘除運(yùn)算符。
字符串類的體操體
體操2：把字符串重復(fù) n 次。
字符串的構(gòu)造我們前面學(xué)過了，就是通過 ${A}${B} 的方式，那只要坐下計(jì)數(shù)，判斷下重復(fù)次數(shù)就行了。
計(jì)數(shù)涉及到了數(shù)字運(yùn)算，要通過構(gòu)造數(shù)組再取 length 的方式。
所以，我們要遞歸的構(gòu)造數(shù)組來計(jì)數(shù)，并且遞歸的構(gòu)造字符串，然后判斷數(shù)組長度達(dá)到目標(biāo)就返回構(gòu)造的字符串。
所以有 Str(待重復(fù)的字符串)、Count(重復(fù)次數(shù))、Arr(用于計(jì)數(shù)的數(shù)組)、ResStr(構(gòu)造出的字符串)四個(gè)類型參數(shù)：
- type RepeactStr<Str extends string,
- Count,
- Arr extends Str[] = [],
- ResStr extends string = ''>
- = Arr['length'] extends Count
- ? ResStr
- : RepeactStr<Str,Count, [Str, ...Arr], `${Str}${ResStr}`>;
我們遞歸的構(gòu)造了數(shù)組和字符串，判斷構(gòu)造的數(shù)組的 length 如果到了 Count，就返回構(gòu)造的字符串 ResStr，否則繼續(xù)遞歸構(gòu)造。
測試一下：
小結(jié)：遞歸構(gòu)造字符串的時(shí)候要通過遞歸構(gòu)造數(shù)組來做計(jì)數(shù)，直到計(jì)數(shù)滿足條件，就生成了目標(biāo)的字符串。
這個(gè)體操只用到了構(gòu)造字符串，沒用到字符串通過模式匹配取子串，我們再做一個(gè)體操。
體操3: 實(shí)現(xiàn)簡易的 JS Parser，能解析字符串 add(11,22) 的函數(shù)名和參數(shù)
字符串的解析需要根據(jù)模式匹配取子串。這里要分別解析函數(shù)名(functionName)、括號(brackets)、數(shù)字(num)、逗號(comma)，我們分別實(shí)現(xiàn)相應(yīng)的高級類型。
解析函數(shù)名
函數(shù)名是由字母構(gòu)成，我們只要一個(gè)個(gè)字符一個(gè)字符的取，判斷是否為字母，是的話就記錄下該字符，然后對剩下的字符串遞歸進(jìn)行同樣的處理，直到不為字母的字符，通過這樣的方式就能取出函數(shù)名。
我們先定義字母的類型：
- 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';
還有保存中間結(jié)果的類型：
- type TempParseResult<Token extends string, Rest extends string> = {
- token: Token,
- rest: Rest
- }
然后就一個(gè)個(gè)取字符來判斷，把取到的字符構(gòu)造成字符串存入中間結(jié)果：
- 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;
我們?nèi)×藛蝹€(gè)字符，然后判斷是否是字母，是的話就把取到的字符構(gòu)造成新的字符串，然后繼續(xù)遞歸取剩余的字符串。
測試一下：
符合我們的需求，我們通過模式匹配取子串的方式解析出了函數(shù)名。
然后繼續(xù)解析剩下的。
解析括號
括號的匹配也是同樣的方式，而且括號只有一個(gè)字符，不需要遞歸的取，取一次就行。
- type brackets = '(' | ')';
- type parseBrackets<SourceStr>
- = SourceStr extends `${infer PrefixChar}${infer RestStr}`
- ? PrefixChar extends brackets
- ? TempParseResult<PrefixChar, RestStr>
- : never
- : never;
測試一下：
繼續(xù)解析剩下的：
解析數(shù)字
數(shù)字的解析也是一個(gè)字符一個(gè)字符的取，判斷是否匹配，匹配的話就遞歸取下一個(gè)字符，直到不匹配：
- 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;
測試一下：
繼續(xù)解析剩下的：
解析逗號
逗號和括號一樣，只需要取一個(gè)字符判斷即可，不需要遞歸。
- type parseComma<SourceStr extends string>
- = SourceStr extends `${infer PrefixChar}${infer RestStr}`
- ? PrefixChar extends ','
- ? TempParseResult<',', RestStr>
- : never
- : never;
測試一下：
至此，我們完成了所有的字符的解析，解析來按照順序組織起來就行。
整體解析
單個(gè) token 的解析都做完了，整體解析就是組織下順序，每次解析完拿到剩余的字符串傳入下一個(gè)解析邏輯，全部解析完，就可以拿到各種信息。
- 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 類型實(shí)現(xiàn)了簡易的 parser!
小結(jié)：ts 類型可以通過模式匹配的方式取出子串，我們通過一個(gè)字符一個(gè)字符的取然后判斷的方式，遞歸的拆分出 token，然后按照順序拆分出 token，就能實(shí)現(xiàn)字符串的解析。
完整代碼如下：
- 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：實(shí)現(xiàn)高級類型，取出對象類型中的數(shù)字屬性值
構(gòu)造對象、取屬性名、取屬性值的語法上文學(xué)過了，這里組合下就行：
- type filterNumberProp<T extends Object> = {
- [Key in keyof T] : T[Key] extends number ? T[Key] : never
- }[keyof T];
我們構(gòu)造一個(gè)新的對象類型，通過 keyof 遍歷對象的屬性名，然后對屬性值做判斷，如果不是數(shù)字就返回 never，然后再取屬性值。
屬性值返回 never 就代表這個(gè)屬性不存在，就能達(dá)到過濾的效果。
測試一下：
小結(jié)：對象類型可以通過 {} 構(gòu)造新對象，通過 [] 取屬性值，通過 keyof 遍歷屬性名，綜合這些語法就可以實(shí)現(xiàn)各種對象類型的邏輯。
總結(jié)
TypeScript 給 JavaScript 擴(kuò)展了類型的語法，而且還支持了高級類型來生成類型。
高級類型是通過 type 聲明的帶有類型參數(shù)的類型，類型參數(shù)也叫泛型。根據(jù)類型參數(shù)生成最終類型的類型計(jì)算邏輯被戲稱為類型體操。
TypeScript 的類型系統(tǒng)是圖靈完備的，可以描述任何可計(jì)算邏輯：
- 有 ? : 可以做條件判斷，常配合 extends 使用
- 通過遞歸可以實(shí)現(xiàn)循環(huán)
- 可以做對象的構(gòu)造 {}、取屬性名 keyof、取屬性值 T[Key]
- 可以做字符串的構(gòu)造 ${a}$，字符串的模式匹配來取子串 str extends ${infer x}${infer y}
我們分別做了這些類型體操：
- ts 實(shí)現(xiàn)加法：通過遞歸構(gòu)造數(shù)組再取長度
- ts 實(shí)現(xiàn)重復(fù)字符串：遞歸構(gòu)造數(shù)組來計(jì)數(shù)，然后遞歸構(gòu)造字符串
- ts 實(shí)現(xiàn) parser：通過字符串模式匹配取子串的方式來解析每一部分，最后組合調(diào)用
- ts 實(shí)現(xiàn)對象屬性過濾：通過構(gòu)造對象、取屬性名、取值的語法組合調(diào)用
其中要注意的就是數(shù)字類的要通過構(gòu)造數(shù)組取長度的方式來計(jì)算，再就是字符串的模式匹配取子串，這兩個(gè)是相對難度大一些的。
其實(shí)各種高級類型，只要熟悉了 ts 類型語法，想清楚了邏輯就能一步步寫出來，和寫 JS 邏輯沒啥本質(zhì)區(qū)別，只不過它是用于生成類型的邏輯。
讀到這里，是不是感覺高級類型的類型體操也沒有啥難度了呢?
【編輯推薦】
