快捷導(dǎo)航

TypeScript交叉運(yùn)算的算法示例解析

更新時(shí)間：2023年08月04日 11:10:47 作者：Qing

這篇文章主要為大家介紹了TypeScript交叉運(yùn)算的算法示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引文

相信只要接觸過ts的同學(xué)就有了解交叉類型這兩個(gè)概念，以前我對(duì)交叉類型感到非常疑惑，明明叫交叉類型，為何對(duì)對(duì)象類型使用了交叉運(yùn)算后類型反而會(huì)進(jìn)行屬性的合并？不知道大家有沒有和我一樣的困惑。這篇文章我會(huì)分享我最近感悟到的用不同視角來解釋出現(xiàn)上述問題的原因，如有錯(cuò)誤，懇請(qǐng)指正。

交叉運(yùn)算

在ts中，使用&這個(gè)符號(hào)來對(duì)兩個(gè)類型進(jìn)行交叉運(yùn)算，下面舉幾個(gè)小例子來開始講解。

例一

type A = number & string    // never

例二

type A = 1 & number                // 1
type B = "hello" & string          // "hello"

例三

type A1 = {a: number}
type A2 = {aa: string}

這里的例子正是我在引文中提到的情況，按照交叉這個(gè)字面意思來理解，{a: number}和{aa: string}兩個(gè)好像也沒有什么交集，按照例一的思路來思考，結(jié)果應(yīng)該是never，為何結(jié)果是{a: number, aa: string}？

首先來思考一個(gè)問題，假設(shè)有這么幾個(gè)對(duì)象：

{a: 1, b: 2}

{aa: "11", bb: "22"}

{a: 1, b: 2, aa: "11", bb: "22"}

這幾個(gè)對(duì)象分別賦值給類型為A1、A2、A的變量，哪個(gè)類型的變量在被賦值的時(shí)候有比較大的可能會(huì)出現(xiàn)錯(cuò)誤？

相信大家能夠很容易的猜到答案，那就是上面的這三個(gè)對(duì)象在給類型為A的變量賦值的時(shí)候前兩個(gè)對(duì)象都會(huì)報(bào)錯(cuò)，只有最后一個(gè)對(duì)象是符合類型要求的。

上述中的A1、A2類型，A1類型的變量只需要值中有屬性名為a，屬性值類型為number的屬性即可滿足，而A2類型的變量只需要值中有屬性名為aa，屬性值類型為string的屬性即可滿足，而A類型的變量對(duì)值的要求是必須要同時(shí)有a和aa這兩個(gè)屬性。

那么符合A1、A2、A類型的值各有幾個(gè)？可以歸類下

符合A1類型的值：{a: 1, b: 2}、{a: 1, b: 2, aa: "11", bb: "22"}

符合A2類型的值：{aa: "11", bb: "22"}、{a: 1, b: 2, aa: "11", bb: "22"}

符合A類型的值：{a: 1, b: 2, aa: "11", bb: "22"}

可以看到在A1 & A2后得到的A類型，其值相對(duì)于A1和A2這兩個(gè)類型對(duì)應(yīng)的值的范圍是變小的，這也符合交叉運(yùn)算的結(jié)果趨勢(shì)。

我們對(duì)數(shù)學(xué)中的交并集運(yùn)算有著很深的印象，但是數(shù)學(xué)上交并集運(yùn)算作用的對(duì)象卻是具體的數(shù)值，如果把這種思想轉(zhuǎn)換到ts類型上來，其實(shí)不太合適，而是應(yīng)該把這種思想作用到ts類型所對(duì)應(yīng)的值上。

現(xiàn)在用這種思路去思考例一和例二，也是能夠走通的。

交叉運(yùn)算在處理對(duì)象類型的時(shí)候，交叉過后屬性反而增多，初看覺得不對(duì)勁，但轉(zhuǎn)換角度細(xì)想或許能發(fā)現(xiàn)其中的道理。