交叉類(lèi)型（Intersection types）

什么事交叉類(lèi)型呢？簡(jiǎn)單來(lái)說(shuō)就是通過(guò)&符號(hào)將多個(gè)類(lèi)型進(jìn)行合并成一個(gè)類(lèi)型，然后用type來(lái)聲明新生成的類(lèi)型。這里我舉個(gè)例子，具體如下：

interface ClassA{
    name:string;
    age:number
}
interface ClassB{
    name:string;
    phone:number;
}

將接口ClassA和接口ClassB通過(guò)&進(jìn)行合并創(chuàng)建一個(gè)新的接口類(lèi)型Class

type Class = ClassA & ClassB
let info:Class = {
    name:'zhagsan',
    age:18,
    phone:1573875555
}

要點(diǎn)

任何類(lèi)型都能通過(guò)&合并成新的類(lèi)型嗎？

• 這肯定是不行的，原子類(lèi)型進(jìn)行合并是沒(méi)有任何意義，因?yàn)樗鼈兒喜⒑蟮念?lèi)型是never，比如string&number，這肯定是錯(cuò)誤的，因?yàn)椴豢赡苡屑葷M(mǎn)足字符串又滿(mǎn)足數(shù)字類(lèi)型。

合并的接口類(lèi)型中具有同名屬性，該怎么處理？

• 這里分兩種情況，如果同名屬性的類(lèi)型相同則合并后還是原本類(lèi)型，如果類(lèi)型不同，則合并后類(lèi)型為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)合類(lèi)型（Union types）

聯(lián)合類(lèi)型和交叉類(lèi)型比較相似，聯(lián)合類(lèi)型通過(guò)|符號(hào)連接多個(gè)類(lèi)型從而生成新的類(lèi)型。它主要是取多個(gè)類(lèi)型的交集，即多個(gè)類(lèi)型共有的類(lèi)型才是聯(lián)合類(lèi)型最終的類(lèi)型。聯(lián)合類(lèi)型可以是多個(gè)類(lèi)型其中一個(gè)，可做選擇，比如：string | number，它的取值可以是string類(lèi)型也可以是number類(lèi)型。
舉幾個(gè)例子，如下所示：

• 聲明變量的時(shí)候設(shè)置變量類(lèi)型

let a:string|number|boolean;
a = 's';
a = 1;
a= false;

• 多個(gè)接口類(lèi)型進(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ù)接口類(lèi)型進(jìn)行聯(lián)合

interface X{
	x:()=>string;
	y:()=>Number;
}
interface Y{
	x:()=>string;
}
type XY = X|Y;
function func1():XY{
//此處不進(jìn)行類(lèi)型斷言為XY在編輯器中會(huì)報(bào)類(lèi)型錯(cuò)誤
  return {} as XY

}
let testFunc = func1();
testFunc.x();
testFunc.y(); //Error：類(lèi)型“XY”上不存在屬性“y”，類(lèi)型“Y”上不存在屬性“y”。

另外我們還要注意，testFunc.x()還會(huì)報(bào)類(lèi)型錯(cuò)誤，我們需要用類(lèi)型守衛(wèi)來(lái)區(qū)分不同類(lèi)型。這里我們用in操作符來(lái)判斷

if('x' in testFunc) testFunc.x()

類(lèi)型縮減

• 當(dāng)字面量類(lèi)型和原始類(lèi)型進(jìn)行聯(lián)合，那么就會(huì)造成類(lèi)型縮減。

type A = 'a' | string;  //string類(lèi)型
type B = false | boolean; //bolean 類(lèi)型
type C = 1 | number; //number類(lèi)型

• 當(dāng)然枚舉也會(huì)有類(lèi)型縮減現(xiàn)象，如下：

enum Class{
   A,
   B
 }
type C = Class.A | Class;//Class類(lèi)型

我們發(fā)現(xiàn)：TS會(huì)把字面量類(lèi)型和枚舉成員類(lèi)型給縮減掉，只剩下原始類(lèi)型和枚舉類(lèi)型
??思考一個(gè)問(wèn)題：當(dāng)接口類(lèi)型進(jìn)行聯(lián)合，接口中同名屬性的類(lèi)型不同，該怎么進(jìn)行縮減呢？比如下面的例子，看到這里的話，如果你知道答案寫(xiě)在評(píng)論區(qū)。

interface A{
   name:string
}
interface B{
   name:string | number
   [property:string]:any
}
type AB = A|B

到此這篇關(guān)于TypeScript交叉類(lèi)型和聯(lián)合類(lèi)型的文章就介紹到這了,更多相關(guān)TS交叉類(lèi)型與聯(lián)合類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論