TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型(Intersection types)
什么事交叉類型呢?簡單來說就是通過&
符號(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 }
要點(diǎn)
任何類型都能通過&
合并成新的類型嗎?
- 這肯定是不行的,原子類型進(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)合類型(Union types)
聯(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)行縮減呢?比如下面的例子,看到這里的話,如果你知道答案寫在評論區(qū)。
interface A{ name:string } interface B{ name:string | number [property:string]:any } type AB = A|B
到此這篇關(guān)于TypeScript交叉類型和聯(lián)合類型的文章就介紹到這了,更多相關(guān)TS交叉類型與聯(lián)合類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
自動(dòng)完成的搜索框javascript實(shí)現(xiàn)
這篇文章主要介紹了自動(dòng)完成的搜索框javascript實(shí)現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-02-02js實(shí)現(xiàn)一個(gè)省市區(qū)三級(jí)聯(lián)動(dòng)選擇框代碼分享
省市區(qū)三級(jí)聯(lián)動(dòng)在填寫表單時(shí)有關(guān)地址這一塊顯得尤為重要,直接提高了用戶的填寫速度與準(zhǔn)確度,接下來本文使用js代碼實(shí)現(xiàn)一個(gè),感興趣的你可以參考下希望可以幫助到你2013-03-03使用 bootstrap modal遇到的問題小結(jié)
bootstrap提供了一個(gè)寫好的css文件和js文件然而在使用時(shí)遇到了一下并不是很好的問題,今天在使用彈出對話框時(shí)遇到了一個(gè)這樣的問題,今天小編給大家分享下使用 bootstrap modal遇到的問題小結(jié),一起看看吧2016-11-11JavaScript?中的引用類型Date?和RegExp的詳細(xì)介紹
這篇文章主要介紹了JavaScript中的引用類型Date和RegExp的詳細(xì)介紹,引用值(或者對象)是某個(gè)特定引用類型的實(shí)例,下文相關(guān)介紹,需要的小伙伴可以參考一下2022-07-07echarts實(shí)現(xiàn)詞云自定義形狀的示例代碼
這篇文章主要介紹了echarts實(shí)現(xiàn)詞云自定義形狀的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02