TS 類型體操：圖解一個復(fù)雜高級類型

之前我們零散地了解了一些 TypeScript 類型體操的套路 ，但是沒有綜合練習(xí)下，今天就來做個高難度的體操，它會綜合運用模式匹配 、構(gòu)造、遞歸等套路，對提升類型編程水平很有幫助。

我們要實現(xiàn)的高級類型如下：

圖片

它的類型參數(shù)是參數(shù)字符串 query string，會返回解析出的參數(shù)對象，如果有同名的參數(shù) ，會把值做合并。

先不著急實現(xiàn)
，我們先回顧下相關(guān)的類型體操基礎(chǔ) ：

類型體操基礎(chǔ)

模式匹配

模式匹配是指用一個類型匹配一個模式類型來提取其中的部分類型到 infer 聲明的局部變量中。

比如提取 a=b 中的 a 和 b：

圖片

這種模式匹配的套路在數(shù)組、字符串、函數(shù)等類型中都有很多應(yīng)用
。

詳細(xì)了解可以看之前的一篇文章：模式匹配-讓你 ts 類型體操水平暴增的套路

構(gòu)造

映射類型用于生成索引類型，生成的過程中可以對索引或者索引值做一些修改 。

比如指定 key 和 value 來生成一個索引類型：

圖片

詳細(xì)了解可以看之前的一篇文章
：TS 類型體操：索引類型的映射再映射

遞歸

TypeScript 高級類型支持遞歸  ，可以處理數(shù)量不確定的問題。

比如不確定長度的字符串的反轉(zhuǎn)：

type ReverseStr<

Str extends string,

Result extends string = ''

>= Str extends `${ infer First}${ infer Rest}`

? ReverseStr

: Result;

圖片

簡單了解下模式匹配、構(gòu)造
、遞歸都是什么之后，就可以開始實現(xiàn)這個復(fù)雜的高級類型 ParseQueryString 了：

思路分析

假設(shè)有這樣一個 query string：a=1&a=2&b=3&c=4 。

我們要首先把它分成 4 部分 ：也就是 a=1
、a=2、b=3、c=4。這個就是用通過上面講的模式匹配來提取。

每一部分又可以進一步處理，提取出 key value 構(gòu)造成索引類型 ，比如 a=1 就可以通過模式匹配提取出 a、1 
，然后構(gòu)造成索引類型 { a: 1}。

這樣就有了 4 個索引類型 { a:1} 、{ a:2} 、{ b:3} 、{ c:4}。

結(jié)下來把它合并成一個就可以了，合并的時候如果有相同的 key 的值，要放到數(shù)組里。

就產(chǎn)生了最終的索引類型：{ a: [1,2], b: 3, c: 4}

整體流程是這樣的：

圖片

其中第一步并不知道有多少個 a=1