TS 类型体操:图解一个复杂高级类型
TS 類型體操:圖解一個(gè)復(fù)雜高級(jí)類型
之前我們零散地了解了一些 TypeScript 類型體操的套路 ,但是沒(méi)有綜合練習(xí)下,今天就來(lái)做個(gè)高難度的體操,它會(huì)綜合運(yùn)用模式匹配、構(gòu)造、遞歸等套路 ,對(duì)提升類型編程水平很有幫助。
我們要實(shí)現(xiàn)的高級(jí)類型如下:
圖片
它的類型參數(shù)是參數(shù)字符串 query string,會(huì)返回解析出的參數(shù)對(duì)象,如果有同名的參數(shù) ,會(huì)把值做合并。
先不著急實(shí)現(xiàn),我們先回顧下相關(guān)的類型體操基礎(chǔ) :
類型體操基礎(chǔ)
模式匹配
模式匹配是指用一個(gè)類型匹配一個(gè)模式類型來(lái)提取其中的部分類型到 infer 聲明的局部變量中。
比如提取 a=b 中的 a 和 b :
圖片
這種模式匹配的套路在數(shù)組、字符串、函數(shù)等類型中都有很多應(yīng)用 。
詳細(xì)了解可以看之前的一篇文章:模式匹配-讓你 ts 類型體操水平暴增的套路
構(gòu)造
映射類型用于生成索引類型 ,生成的過(guò)程中可以對(duì)索引或者索引值做一些修改 。
比如指定 key 和 value 來(lái)生成一個(gè)索引類型 :
圖片
詳細(xì)了解可以看之前的一篇文章:TS 類型體操 :索引類型的映射再映射
遞歸
TypeScript 高級(jí)類型支持遞歸 ,可以處理數(shù)量不確定的問(wèn)題。
比如不確定長(zhǎng)度的字符串的反轉(zhuǎn):
type ReverseStr<
Str extends string,
Result extends string = ''
>= Str extends `${ infer First}${ infer Rest}`
? ReverseStr
: Result;
圖片
簡(jiǎn)單了解下模式匹配、構(gòu)造、遞歸都是什么之后,就可以開始實(shí)現(xiàn)這個(gè)復(fù)雜的高級(jí)類型 ParseQueryString 了:
思路分析
假設(shè)有這樣一個(gè) query string :a=1&a=2&b=3&c=4。
我們要首先把它分成 4 部分 :也就是 a=1 、a=2、b=3、c=4。這個(gè)就是用通過(guò)上面講的模式匹配來(lái)提取