TS 類型體操：圖解一個復雜高級類型
之前我們零散地了解了一些 TypeScript 類型體操的套路，但是沒有綜合練習下，今天就來做個高難度的體操，它會綜合運用模式匹配、構造、遞歸等套路，對提升類型編程水平很有幫助。
我們要實現的高級類型如下：
它的類型參數是參數字符串 query string，會返回解析出的參數對象，如果有同名的參數，會把值做合并。
先不著急實現，我們先回顧下相關的類型體操基礎：
類型體操基礎
模式匹配
模式匹配是指用一個類型匹配一個模式類型來提取其中的部分類型到 infer 聲明的局部變量中。
比如提取 a=b 中的 a 和 b：
這種模式匹配的套路在數組、字符串、函數等類型中都有很多應用。
詳細了解可以看之前的一篇文章：模式匹配-讓你 ts 類型體操水平暴增的套路
構造
映射類型用于生成索引類型，生成的過程中可以對索引或者索引值做一些修改。
比如指定 key 和 value 來生成一個索引類型：
詳細了解可以看之前的一篇文章：TS 類型體操：索引類型的映射再映射
遞歸
TypeScript 高級類型支持遞歸，可以處理數量不確定的問題。
比如不確定長度的字符串的反轉：
type ReverseStr<
Str extends string,
Result extends string = ''
> = Str extends `${infer First}${infer Rest}`
? ReverseStr<Rest, `${First}${Result}`>
: Result;
簡單了解下模式匹配、構造、遞歸都是什么之后，就可以開始實現這個復雜的高級類型 ParseQueryString 了：
思路分析
假設有這樣一個 query string：a=1&a=2&b=3&c=4。
我們要首先把它分成 4 部分：也就是 a=1、a=2、b=3、c=4。這個就是用通過上面講的模式匹配來提取。
每一部分又可以進一步處理，提取出 key value 構造成索引類型，比如 a=1 就可以通過模式匹配提取出 a、1，然后構造成索引類型 {a: 1}。
這樣就有了 4 個索引類型 {a:1}、{a:2}、{b:3}、{c:4}。
結下來把它合并成一個就可以了，合并的時候如果有相同的 key 的值，要放到數組里。
就產生了最終的索引類型：{a: [1,2], b: 3, c: 4}
整體流程是這樣的：
其中第一步并不知道有多少個 a=1、b=2 這種 query param，所以要遞歸的做模式匹配來提取。
這就是這個高級類型的實現思路。
下面我們具體來寫一下：
代碼實現
我們按照上圖的順序來實現，首先提取 query string 中的每一個 query param：
query param 數量不確定，所以要用遞歸：
type ParseQueryString<Str extends string>
= Str extends `${infer Param}&${infer Rest}`
? MergeParams<ParseParam<Param>, ParseQueryString<Rest>>
: ParseParam<Str>;
類型參數 Str 為待處理的 query string。
通過模式匹配提取其中第一個 query param 到 infer 聲明的局部變量 Param 中，剩余的字符串放到 Rest 中。
用 ParseParam 來處理 Param，剩余的遞歸處理，最后把它們合并到一起，也就是 MergeParams 。
如果模式匹配不滿足，說明還剩下最后一個 query param 了，也用 ParseParam 處理。
然后分別實現每一個 query param 的 parse：
這個就是用模式匹配提取 key 和 value，然后構造一個索引類型：
type ParseParam<Param extends string>
= Param extends `${infer Key}=${infer Value}`
? { [K in Key]: Value }
: {};
這里構造索引類型用的就是映射類型的語法。
先來測試下這個 ParseParam：
做完每一個 query param 的解析了，之后把它們合并到一起就行：
合并的部分就是 MergeParams：
type MergeParams<
OneParam extends object,
OtherParam extends object
> = {
[Key in keyof OneParam | keyof OtherParam]:
Key extends keyof OneParam
? Key extends keyof OtherParam
? MergeValues<OneParam[Key], OtherParam[Key]>
: OneParam[Key]
: Key extends keyof OtherParam
? OtherParam[Key]
: never
}
兩個索引類型的合并也是要用映射類型的語法構造一個新的索引類型。
key 是取自兩者也就是 key in keyof OneParam | keyof OtherParam。
value 要分兩種情況：
- 如果兩個索引類型都有的 key，就要做合并，也就是 MergeValues。
- 如果只有其中一個索引類型有，那就取它的值，也就是 OtherParam[key] 或者 OneParam[Key]。
合并的時候，如果兩者一樣就返回任意一個，如果不一樣，就合并到數組里返回，也就是 [One, Other]。如果本來是數組的話，那就是數組的合并 [One, ...Other]。
type MergeValues<One, Other> =
One extends Other
? One
: Other extends unknown[]
? [One, ...Other]
: [One, Other];
測試下 MergeValues：
這樣，我們就實現了整個高級類型，整體測試下：
這個案例綜合運用到了遞歸、模式提取、構造的套路，還是比較復雜的。
可以對照著這張圖來看下完整代碼：
type ParseParam<Param extends string> =
Param extends `${infer Key}=${infer Value}`
? {
[K in Key]: Value
} : {};
type MergeValues<One, Other> =
One extends Other
? One
: Other extends unknown[]
? [One, ...Other]
: [One, Other];
type MergeParams<
OneParam extends object,
OtherParam extends object
> = {
[Key in keyof OneParam | keyof OtherParam]:
Key extends keyof OneParam
? Key extends keyof OtherParam
? MergeValues<OneParam[Key], OtherParam[Key]>
: OneParam[Key]
: Key extends keyof OtherParam
? OtherParam[Key]
: never
}
type ParseQueryString<Str extends string> =
Str extends `${infer Param}&${infer Rest}`
? MergeParams<ParseParam<Param>, ParseQueryString<Rest>>
: ParseParam<Str>;
type ParseQueryStringResult = ParseQueryString<'a=1&a=2&b=2&c=3'>;
總結
我們首先復習了下 3 種類型體操的套路：
模式匹配：一個類型匹配一個模式類型，提取其中的部分類型到 infer 聲明的局部變量中
構造：通過映射類型的語法來構造新的索引類型，構造過程中可以對索引和值做一些修改
遞歸：當處理數量不確定的類型時，可以每次只處理一個，剩下的遞歸來做
然后用這些套路來實現了一個 ParseQueryString 的復雜高級類型。
如果能獨立實現這個高級類型，說明你對這三種類型體操的套路掌握的就挺不錯的了。
