快捷導(dǎo)航

TypeScript交叉運算的算法示例解析

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

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

引文

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

交叉運算

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

例一

type A = number & string    // never

例二

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

例三

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

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

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

{a: 1, b: 2}

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

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

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

相信大家能夠很容易的猜到答案，那就是上面的這三個對象在給類型為A的變量賦值的時候前兩個對象都會報錯，只有最后一個對象是符合類型要求的。

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

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

符合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類型，其值相對于A1和A2這兩個類型對應(yīng)的值的范圍是變小的，這也符合交叉運算的結(jié)果趨勢。

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

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

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