建站
咨詢
售后
建站咨詢
新聞中心
第一個：
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供邗江網(wǎng)站建設(shè)、邗江做網(wǎng)站、邗江網(wǎng)站設(shè)計、邗江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、邗江企業(yè)網(wǎng)站模板建站服務(wù)，十年邗江做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
傳入的類型參數(shù)為聯(lián)合類型 1 | 'a'，問 res 是啥
type Test= T extends number ? 1 : 2;
type res = Test<1 | 'a'>;
第二個：
傳入的類型參數(shù)為 boolean，問 res 是啥
type Test= T extends true ? 1 : 2;
type res = Test;
第三個：
傳入的類型參數(shù)為 any，問 res 是啥
type Test= T extends true ? 1 : 2;
type res = Test;
第四個：
傳入的類型參數(shù)為 never，問 res 是啥
type Test= T extends true ? 1 : 2;
type res = Test;
先記一下自己的答案，接下來我公布正確答案，大家看下猜對了幾個。
答案公布
第一個類型 res 是 1 | 2
再來看第二個類型，res 也是 1 | 2
接下來是第三個類型，res 也是 1 | 2
最后是第四個類型，res 是 never
不管答對了幾個都沒關(guān)系，關(guān)鍵是要知道它的原因，接下來我解釋下：
原因解釋
第一個類型 res 是 1 | 2
有同學(xué)可能會說，這里傳入的是聯(lián)合類型呀，也不是 number，為啥結(jié)果是這樣呢?
因為當(dāng)條件類型的左邊是類型參數(shù)時，會有 distributive 的性質(zhì)，也就是把聯(lián)合類型的每個類型單獨傳入求值，把每個的結(jié)果合并成聯(lián)合類型，這叫做分布式條件類型。
這里的 T extends number 的左邊是類型參數(shù) T，傳入的是聯(lián)合類型 1 | 'a'，所以會把 1 傳入求值、把 2 傳入求值，最后把結(jié)果合并成聯(lián)合類型，也就是 1 | 2。
再來看第二個類型，res 也是 1 | 2
為啥這里也是 1 | 2 呢， 剛才說的分布式條件類型是針對聯(lián)合類型的呀?
沒錯，boolean 其實也是聯(lián)合類型，所以會把 true 和 false 分別傳入求值，最后結(jié)果合并成聯(lián)合類型，所以是 1 | 2。
接下來是第三個類型，res 也是 1 | 2
同學(xué)可能會說：哦，我知道了，any 也是聯(lián)合類型。
錯，any 不是聯(lián)合類型，這里是因為條件類型對 any 做了特殊處理，如果左邊是 any，那么直接把 trueType 和 falseType 合并成聯(lián)合類型返回。
最后是第四個類型，res 是 never
咋還出來個 never，不是只有 1 和 2 么?
這里確實也是 TS 的特殊處理，當(dāng)條件類型左邊是 never 時，直接返回 never。
你說了這么多，我怎么知道是不是真的呢，萬一是你編的呢?
有懷疑很正常，這也是應(yīng)該有的態(tài)度，不過這些確實都是真的，接下來我從源碼來驗證下。
從 TS 源碼解釋原因
這里的重點不在如何讀 TypeScript 源碼上，我就略過過程了，直接給結(jié)果。
對如何閱讀 TypeScript 源碼感興趣的同學(xué)，可以看我之前的一篇文章：《我讀 TypeScript 源碼的秘訣都在這里了》，或者看我剛上線的掘金小冊《TypeScript 類型體操通關(guān)秘籍》，小冊里會帶大家從源碼解釋各種類型的原理。
先來解釋第一個聯(lián)合類型 + 條件類型的情況：
type Test= T extends number ? 1 : 2;
type res = Test<1 | 'a'>;
TypeScript 在處理到條件類型 Conditional Type 的時候，會設(shè)置一個 isDistributive 的屬性，根據(jù)類型參數(shù)是不是 checkType(左邊的類型)來設(shè)置。
因為 T extends number 的 checkType 是 T，所以這里的 isDistributive 就是 true，也就是它是分布式條件類型。
那么是分布式條件類型會做什么處理呢?
會在求值的時候把每個類型單獨傳入求值，最后把結(jié)果合并。
對應(yīng)的源碼是這樣的：
這里都不用解釋了，注釋都寫的很清楚了， T extends U ? X : Y 當(dāng)傳入的 T 是 A | B 時，結(jié)果是 (A extends U ? X : Y)|(B extends U ? X : Y)。
這就是分布式條件類型遇到聯(lián)合類型時的處理。
所以，源碼走到了 mapTypeWithAlias 這個分支，就是做每個類型單獨傳入求值的。
我們從源碼驗證了分布式條件類型的特性!
接下來再來看第二個類型，當(dāng)條件類型 + boolean 時：
type Test= T extends true ? 1 : 2;
type res = Test;
前面說 boolean 也是聯(lián)合類型，這是不是真的呢?
debug 發(fā)現(xiàn)它也走到這個分支了。說明條件成立，boolean 是 union 或者 never
驗證一下：
這里的 flags 就是每一個位表示一種類型，然后通過位運算的按位與來判斷是否是那種類型：
這種方式占用空間小，計算速度快，很多框架都是這樣來標(biāo)識類型的，比如 React。
所以，從結(jié)果來看 boolean 是聯(lián)合類型，也就是 true | false。那自然也會觸發(fā)分布式條件類型的特性，把 true 和 false 單獨傳入求值，最后把結(jié)果合并。
然后是第三個類型，當(dāng)條件類型 + any 時：
type Test= T extends true ? 1 : 2;
type res = Test;
debug 會發(fā)現(xiàn)并沒有走到 mapType 那個分支，而走了另一個分支：
這就說明條件不滿足，any 不是聯(lián)合類型呀，我們也可以通過 flags 看下：
按位與的結(jié)果是 0，也說明了它不是 union 和 never。
那為啥結(jié)果還是 1 | 2 呢?
繼續(xù)往下走，看條件類型的求值邏輯，會發(fā)現(xiàn)這樣一段代碼：
注釋是 Return union of trueType and falseType for 'any' since it matches anything，意思是是返回 trueType 和 falseType 的聯(lián)合類型，因為 any 匹配任何類型。
原因不就出來了么。(不得不說，TS 源碼的注釋寫的真不錯)
然后就是最后一個類型，當(dāng)條件類型 + never 時：
type Test= T extends true ? 1 : 2;
type res = Test;
為啥直接返回了 never 呢?
debug 會發(fā)現(xiàn) never 也走到 mapType 這個分支了：
啥情況，never 又不是聯(lián)合類型，咋分呀。
人家條件里確實寫的是 Union 或者 Never：
說明肯定對 Never 做了特殊處理，別著急，我們繼續(xù)往下看。
繼續(xù)往下走會發(fā)現(xiàn) Union 和 Never 在這里分叉了：
然后 mapType 里對 never 類型直接就給返回了該類型，也就是 never：
這就是為啥結(jié)果既不是 trueType、也不是 falseType，而是 never。
至此，我們通過源碼來驗證了上面說的原因的真實性。
總結(jié)
TypeScript 的類型系統(tǒng)有一些特殊的設(shè)計：
條件類型當(dāng) checkType(左邊的類型)是類型參數(shù)的時候，會有 distributive 的性質(zhì)，也就是傳入聯(lián)合類型時會把每個類型單獨傳入做計算，最后把結(jié)果合并返回。這叫做分布式條件類型。
此外，條件類型遇到 never 會直接返回 never，遇到 any 會返回 trueType 和 falseType 的聯(lián)合類型。
再就是 boolean 也是聯(lián)合類型，是 true | false。
類似這種特殊的地方還是不少的，這些我都總結(jié)在了 《TypeScript 類型體操通關(guān)秘籍》的小冊里，會全面系統(tǒng)的講 TypeScript 類型編程，還有會教大家如何 TypeScript 源碼來解釋這些類型的原理。感興趣的可以看一下，保證不坑。而且現(xiàn)在買很便宜的，只有 17 塊。
分享文章：這幾個TypeScript類型，90%的人說不出原因
網(wǎng)站地址：http://www.5511xx.com/article/cosssii.html
