真實案例說明 TypeScript 類型體操的意義

TypeScript 類型系統(tǒng)支持類型編程，也就是對類型參數(shù)做一系列運算產(chǎn)生新的類型。比如這樣 ：

type isTwo= T extends 2 ? true: false;

這種類型編程邏輯可以寫的很復(fù)雜
，所以被戲稱為“類型體操”。

它是 TS 中最強大也是最復(fù)雜的部分了 ，屬于深水區(qū)的內(nèi)容 。

很多同學(xué)不知道類型編程學(xué)了有什么用，好像做業(yè)務(wù)也用不到這個
。那今天我們就來看一個具體的例子 ，來感受下類型體操的意義 。

我們想實現(xiàn)這樣一個 JS 方法：

function parseQueryString(queryStr) {

if (!queryStr || !queryStr.length) {

return { };

}

const queryObj = { };

const items = queryStr.split('&');

items.forEach(item =>{

const [key, value] = item.split('=');

if (queryObj[key]) {

if(Array.isArray(queryObj[key])) {

queryObj[key].push(value);

} else {

queryObj[key] = [queryObj[key], value]

}

} else {

queryObj[key] = value;

}

});

return queryObj;

}

這段代碼很容易看出來就是做 query string 的 parse 的，會把 'a=1&b=2&c=3' 的字符串 parse 成 { a: 1, b: 2, c: 3 } 返回 。如果有同名的 key 的話 ，就合并到一個數(shù)組里  。

JS 的邏輯大家寫的比較多，這部分很容易理解：

圖片

那如果要給這個函數(shù)加上類型，大家會怎么加呢 ？

我猜，大部分人會這么加 ：

圖片

參數(shù)是 string 類型，返回值是 parse 之后的對象類型 object 。

這樣是可以的 ，而且 object 還可以寫成 Record
，因為對象是索引類型（索引類型就是聚合多個元素的類型 ，比如對象 、class 、數(shù)組都是）。

圖片

Record 是 TS 內(nèi)置的一個高級類型 ，是通過映射類型的語法來生成索引類型的 ：

type Record= {

[P in K]: T;

}

比如傳入 'a' | 'b' 作為 key，1 作為 value
，就可以生成這樣索引類型：

圖片

所以這里的 Record也就是 key 為 string 類型，value 為任意類型的索引類型 ，可以代替 object 來用 ，更加語義化一點 ：

圖片

但是不管是返回值類型為 object 還是 Record都存在一個問題：返回的對象不能提示出有哪些屬性：

圖片

對于習(xí)慣了 ts 的提示的同學(xué)來說，沒有提示太不爽了。怎么能讓這個函數(shù)的返回的類型有提示呢？

這就要用到類型編程了。

我們把函數(shù)的類型定義改成這樣  ：

圖片

聲明一個類型參數(shù) Str
，約束為 string 類型，函數(shù)參數(shù)的類型指定是這個 Str ，返回值的類型通過對 Str 做類型運算得到 ，也就是 ParseQueryString。

這個 ParseQueryString 的類型做的事情就是把傳入的 Str 通過各種類型運算產(chǎn)生對應(yīng)的索引類型
。

這樣返回的類型就有提示了 ：

圖片

是不是很神奇 ！這就是類型體操的魅力！能夠?qū)崿F(xiàn)更精準的類型提示 。

那這個 ParseQueryString 的高級類型是怎么實現(xiàn)的呢？

其實我們實現(xiàn)過：TS 類型體操：圖解一個復(fù)雜高級類型，這里再講一下