真實(shí)案例說(shuō)明 TypeScript 類(lèi)型體操的意義

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

type isTwo= T extends 2 ? true: false;

這種類(lèi)型編程邏輯可以寫(xiě)的很復(fù)雜，所以被戲稱(chēng)為“類(lèi)型體操”。

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

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

我們想實(shí)現(xiàn)這樣一個(gè) 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;

}

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

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

圖片

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

我猜，大部分人會(huì)這么加