您好,登錄后才能下訂單哦!
這篇文章主要介紹了TypeScript的交叉類型和聯(lián)合類型是什么的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇TypeScript的交叉類型和聯(lián)合類型是什么文章都會(huì)有所收獲,下面我們一起來看看吧。
什么事交叉類型呢?簡單來說就是通過&
符號(hào)將多個(gè)類型進(jìn)行合并成一個(gè)類型,然后用type
來聲明新生成的類型。這里我舉個(gè)例子,具體如下:
interface ClassA{ name:string; age:number } interface ClassB{ name:string; phone:number; }
將接口ClassA和接口ClassB通過&進(jìn)行合并創(chuàng)建一個(gè)新的接口類型Class
type Class = ClassA & ClassB let info:Class = { name:'zhagsan', age:18, phone:1573875555 }
任何類型都能通過&
合并成新的類型嗎?
這肯定是不行的,原子類型進(jìn)行合并是沒有任何意義,因?yàn)樗鼈兒喜⒑蟮念愋褪?code>never,比如string&number
,這肯定是錯(cuò)誤的,因?yàn)椴豢赡苡屑葷M足字符串又滿足數(shù)字類型。
合并的接口類型中具有同名屬性,該怎么處理?
這里分兩種情況,如果同名屬性的類型相同則合并后還是原本類型,如果類型不同,則合并后類型為never
interface X{ q:number, w:string } interface Y{ q:boolean, r:string, } type XY = X&Y
編輯器中直接就給我們了提示,如下圖所示:
再舉一個(gè)稍微復(fù)雜點(diǎn)的例子
interface A { inner: D; } interface B { inner: E; } interface C { inner: F; } interface D { d: boolean; } interface E { e: string; } interface F { f: number; }
type ABC = A & B & C; let abc: ABC = { inner: { d: false, e: 'className', f: 5 } };
聯(lián)合類型和交叉類型比較相似,聯(lián)合類型通過|
符號(hào)連接多個(gè)類型從而生成新的類型。它主要是取多個(gè)類型的交集,即多個(gè)類型共有的類型才是聯(lián)合類型最終的類型。聯(lián)合類型可以是多個(gè)類型其中一個(gè),可做選擇,比如:string | number
,它的取值可以是string
類型也可以是number
類型。
舉幾個(gè)例子,如下所示:
聲明變量的時(shí)候設(shè)置變量類型
let a:string|number|boolean; a = 's'; a = 1; a= false;
多個(gè)接口類型進(jìn)行聯(lián)合
interface X{ q:number, w:string, r:string } interface Y{ q:number r:string, } type XY = X | Y let value:XY = { q:1, r:'r' }
函數(shù)接口類型進(jìn)行聯(lián)合
interface X{ x:()=>string; y:()=>Number; } interface Y{ x:()=>string; } type XY = X|Y; function func1():XY{ //此處不進(jìn)行類型斷言為XY在編輯器中會(huì)報(bào)類型錯(cuò)誤 return {} as XY } let testFunc = func1(); testFunc.x(); testFunc.y(); //Error:類型“XY”上不存在屬性“y”,類型“Y”上不存在屬性“y”。
另外我們還要注意,testFunc.x()
還會(huì)報(bào)類型錯(cuò)誤,我們需要用類型守衛(wèi)來區(qū)分不同類型。這里我們用in
操作符來判斷
if('x' in testFunc) testFunc.x()
當(dāng)字面量類型和原始類型進(jìn)行聯(lián)合,那么就會(huì)造成類型縮減。
type A = 'a' | string; //string類型 type B = false | boolean; //bolean 類型 type C = 1 | number; //number類型
當(dāng)然枚舉也會(huì)有類型縮減現(xiàn)象,如下:
enum Class{ A, B } type C = Class.A | Class;//Class類型
我們發(fā)現(xiàn):TS會(huì)把字面量類型和枚舉成員類型給縮減掉,只剩下原始類型和枚舉類型
思考一個(gè)問題:當(dāng)接口類型進(jìn)行聯(lián)合,接口中同名屬性的類型不同,該怎么進(jìn)行縮減呢?比如下面的例子,看到這里的話,如果你知道答案寫在評(píng)論區(qū)。
interface A{ name:string } interface B{ name:string | number [property:string]:any } type AB = A|B
關(guān)于“TypeScript的交叉類型和聯(lián)合類型是什么”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“TypeScript的交叉類型和聯(lián)合類型是什么”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。