TypeScript 交叉類型使用方法示例總結
更新時間：2023年08月11日 09:16:15 作者：艾艾
這篇文章主要為大家介紹了TypeScript 交叉類型使用方法示例總結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
一. 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;?//?這么寫不報錯小結
場景一中的直接對象字面量聲明會觸發(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;
}這里也可以看出，當我們?nèi)懸恍┛蓴U展的類型的時候interface會更好，如果寫的不合邏輯，在寫類型的瞬間就會報錯，如果用type只會給你搞出一個never，當你用到的時候才會發(fā)現(xiàn)有問題
七. 對函數(shù)類型的取交集
兩個函數(shù)類型求交集，最終會得到參數(shù)取并集，這個之后會詳細講，這里先看一下結論
type?A?=?{
??method:?(a:?number)?=>?void;
};
type?B?=?{
??method:?(a:?string)?=>?void;
}?&?A;
const?b:?B?=?{
??method(a)?{
????a;?//?number?|?string
??},
};總結
交叉類型常用于有交集的類型A,B。如果A,B無交集可能會得到never，也有可能是屬性為never。
以上就是TypeScript 交叉類型使用方法示例總結的詳細內(nèi)容，更多關于TypeScript 交叉類型的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了TypeScript判斷對稱的二叉樹方案實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了TypeScript條件類型示例的全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了TypeScript類型級別和值級別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了基于tsup打包TypeScript實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了typescript type 分配條件類型示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
簡單三行代碼函數(shù)實現(xiàn)幾十行Typescript類型推導
這篇文章主要為大家介紹了簡單三行代碼函數(shù)實現(xiàn)幾十行Typescript類型推導的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
TypeScript類型any never void和unknown使用場景區(qū)別
這篇文章主要為大家介紹了TypeScript類型any never void和unknown使用場景區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
ThreeJS使用紋理貼圖創(chuàng)建一個我的世界草地方塊
這篇文章主要為大家介紹了ThreeJS使用紋理貼圖創(chuàng)建一個我的世界草地方塊的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Typescript?轉換類型操作索引映射類型IIMT模式學習
這篇文章主要為大家介紹了Typescript?轉換類型操作之索引映射類型IIMT模式學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
TypeScript使用strictnullcheck實戰(zhàn)解析
這篇文章主要為大家介紹了TypeScript使用strictnullcheck實戰(zhàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08