快捷導(dǎo)航

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

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

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

引文

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

交叉運(yùn)算

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

例一

type A = number & string    // never

例二

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

例三

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

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

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

{a: 1, b: 2}

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

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

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

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

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

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

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

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

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

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

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

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

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