快捷導(dǎo)航

TypeScript 交叉類型使用方法示例總結(jié)

更新時間：2023年08月11日 09:16:15 作者：艾艾

這篇文章主要為大家介紹了TypeScript 交叉類型使用方法示例總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一. TS類型系統(tǒng)中的交叉類型(交集)

type?A?=?string?&?number;?//?never，?一般我們都不會把交集用在基本類型，而是用在對象上
type?有右手的人?=?{
??right:?string;
};
type?C?=?有左手的人?|?有右手的人;
type?D?=?有左手的人?&?有右手的人;
const?d:?D?=?{
??left:?'yes',?//?會報錯，缺少right
};

二. 有左手的人能否有右手

//?場景一.?直接初始化賦值
type?有左手的人?=?{
??left:?string;
};
const?a:?有左手的人?=?{
??left:?'一米八',
??right:?'一米五',?//?這么寫會報錯
};
//?場景二.?先聲明好對象，再賦值
type?有左手的人?=?{
??left:?string;
};
const?b?=?{
??left:?'一米八',
??right:?'一米五',
};
const?a:?有左手的人?=?b;?//?這么寫不報錯

小結(jié)

場景一中的直接對象字面量聲明會觸發(fā)屬性匹配驗證，而場景二中的先聲明變量再賦值的方式會繞過這種驗證，因此不會報錯。

三. 接口也能求交集

interface?Colorful?{
??color:?string;
}
interface?Circle?{
??radius:?number;
}
type?ColorfulCircle?=?Colorful?&?Circle;
const?CC:?ColorfulCircle?=?{
??color:?'red',
??radius:?11,
};

四. 使用&模擬繼承

type?Person?=?{
??name:?string;
??age:?number;
};
type?User?=?Person?&?{
??id:?number;
??email:?string;
};
const?u:?User?=?{
??name:?'Jack',
??age:?18,
??id:?1,
??email:?'Jack@alibaba.com',
};

五. 使用&時屬性沖突的場景

會求交集

//?場景一
type?Person?=?{
??name:?string;
??age:?number;
??id:?string;
};
type?User?=?Person?&?{
??id:?number;
??email:?string;
};
const?u:?User?=?{
??name:?'Jack',
??age:?18,
??id:?1?as?never,?//?這個變成了never，且必須存在
??email:?'Jack@alibaba.com',
};
//?場景二?User是never，?這是一種特殊的場景
type?Person?=?{
??id:?'A';
??name:?string;
??age:?number;
};
type?User?=?Person?&?{
??id:?'B';
??email:?string;
};

六. interface遇到?jīng)_突會如何

interface?Person?{
??id:?string;
??name:?string;
}
//?會報錯?接口“User”錯誤擴展接口“Person”。屬性“id”的類型不兼容。不能將類型“number”分配給類型“string”。
interface?User?extends?Person?{
??id:?number;
??email:?string;
}

這里也可以看出，當(dāng)我們?nèi)懸恍┛蓴U展的類型的時候interface會更好，如果寫的不合邏輯，在寫類型的瞬間就會報錯，如果用type只會給你搞出一個never，當(dāng)你用到的時候才會發(fā)現(xiàn)有問題

七. 對函數(shù)類型的取交集

兩個函數(shù)類型求交集，最終會得到參數(shù)取并集，這個之后會詳細講，這里先看一下結(jié)論

type?A?=?{
??method:?(a:?number)?=>?void;
};
type?B?=?{
??method:?(a:?string)?=>?void;
}?&?A;
const?b:?B?=?{
??method(a)?{
????a;?//?number?|?string
??},
};