TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型（Intersection types）
什么事交叉類型呢？簡單來說就是通過&符號將多個類型進(jìn)行合并成一個類型，然后用type來聲明新生成的類型。這里我舉個例子，具體如下：
interface ClassA{
name:string;
age:number
}
interface ClassB{
name:string;
phone:number;
}將接口ClassA和接口ClassB通過&進(jìn)行合并創(chuàng)建一個新的接口類型Class
type Class = ClassA & ClassB
let info:Class = {
name:'zhagsan',
age:18,
phone:1573875555
}要點(diǎn)
任何類型都能通過&合并成新的類型嗎？
- 這肯定是不行的，原子類型進(jìn)行合并是沒有任何意義，因?yàn)樗鼈兒喜⒑蟮念愋褪?code>never，比如
string&number，這肯定是錯誤的，因?yàn)椴豢赡苡屑葷M足字符串又滿足數(shù)字類型。
合并的接口類型中具有同名屬性，該怎么處理？
- 這里分兩種情況，如果同名屬性的類型相同則合并后還是原本類型，如果類型不同，則合并后類型為
never
interface X{
q:number,
w:string
}
interface Y{
q:boolean,
r:string,
}
type XY = X&Y編輯器中直接就給我們了提示，如下圖所示：
再舉一個稍微復(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)合類型通過|符號連接多個類型從而生成新的類型。它主要是取多個類型的交集，即多個類型共有的類型才是聯(lián)合類型最終的類型。聯(lián)合類型可以是多個類型其中一個，可做選擇，比如：string | number，它的取值可以是string類型也可以是number類型。
舉幾個例子，如下所示：
- 聲明變量的時候設(shè)置變量類型
let a:string|number|boolean; a = 's'; a = 1; a= false;
- 多個接口類型進(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在編輯器中會報(bào)類型錯誤
return {} as XY
}
let testFunc = func1();
testFunc.x();
testFunc.y(); //Error：類型“XY”上不存在屬性“y”，類型“Y”上不存在屬性“y”。另外我們還要注意，testFunc.x()還會報(bào)類型錯誤，我們需要用類型守衛(wèi)來區(qū)分不同類型。這里我們用in操作符來判斷
if('x' in testFunc) testFunc.x()類型縮減
- 當(dāng)字面量類型和原始類型進(jìn)行聯(lián)合，那么就會造成類型縮減。
type A = 'a' | string; //string類型 type B = false | boolean; //bolean 類型 type C = 1 | number; //number類型
- 當(dāng)然枚舉也會有類型縮減現(xiàn)象，如下：
enum Class{
A,
B
}
type C = Class.A | Class;//Class類型我們發(fā)現(xiàn)：TS會把字面量類型和枚舉成員類型給縮減掉，只剩下原始類型和枚舉類型
??思考一個問題：當(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)文章
自動完成的搜索框javascript實(shí)現(xiàn)
這篇文章主要介紹了自動完成的搜索框javascript實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-02-02
js實(shí)現(xiàn)一個省市區(qū)三級聯(lián)動選擇框代碼分享
省市區(qū)三級聯(lián)動在填寫表單時有關(guān)地址這一塊顯得尤為重要,直接提高了用戶的填寫速度與準(zhǔn)確度，接下來本文使用js代碼實(shí)現(xiàn)一個，感興趣的你可以參考下希望可以幫助到你2013-03-03
本文主要介紹了tab欄切換的原理以及實(shí)現(xiàn)方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
使用 bootstrap modal遇到的問題小結(jié)
bootstrap提供了一個寫好的css文件和js文件然而在使用時遇到了一下并不是很好的問題，今天在使用彈出對話框時遇到了一個這樣的問題，今天小編給大家分享下使用 bootstrap modal遇到的問題小結(jié)，一起看看吧2016-11-11
如果在使用javascript的時候涉及到event處理，就需要知道event在不同的瀏覽器中的差異。2009-12-12
這篇文章主要介紹了JavaScript判斷對象和數(shù)組的兩種方法,非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了javascript自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
建立完全獨(dú)立的JS對象...2006-12-12
JavaScript?中的引用類型Date?和RegExp的詳細(xì)介紹
這篇文章主要介紹了JavaScript中的引用類型Date和RegExp的詳細(xì)介紹,引用值(或者對象)是某個特定引用類型的實(shí)例,下文相關(guān)介紹，需要的小伙伴可以參考一下2022-07-07
echarts實(shí)現(xiàn)詞云自定義形狀的示例代碼
這篇文章主要介紹了echarts實(shí)現(xiàn)詞云自定義形狀的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02