TypeScript中的互斥類(lèi)型實(shí)現(xiàn)方法示例
前言
有這樣一個(gè)對(duì)象,它有兩個(gè)屬性:name與title,在賦值的時(shí)候這兩個(gè)屬性只有一個(gè)能出現(xiàn),例如:name出現(xiàn)的時(shí)候title就不能出現(xiàn),title出現(xiàn)的時(shí)候name就不能出現(xiàn)。
此時(shí),你會(huì)怎么用TypeScript來(lái)定義這個(gè)類(lèi)型?本文將帶大家實(shí)現(xiàn)一個(gè)互斥類(lèi)型來(lái)解決這個(gè)問(wèn)題,歡迎各位感興趣的開(kāi)發(fā)者閱讀本文。
前置知識(shí)
在實(shí)現(xiàn)之前,我們需要先來(lái)了解幾個(gè)基礎(chǔ)的知識(shí)。
對(duì)象中多屬性同類(lèi)型的定義
有一個(gè)對(duì)象它包含5個(gè)可選屬性a、b、c、d、e,他們的類(lèi)型都為string,大多數(shù)人的定義方式應(yīng)該如下所示:
type obj = { a?:string; b?:string; c?:string; d?:string; e?:string; }
那么,有沒(méi)有更好的方式呢??,答案是有的,請(qǐng)看我的表演:
type obj = { [P in "a" | "b" | "c" | "d" | "e"]?: string };
never類(lèi)型
在TypeScript中它有一個(gè)特殊的類(lèi)型never,它是所有類(lèi)型的子類(lèi)型,無(wú)法再進(jìn)行細(xì)分,也就意味著除了其本身沒(méi)有類(lèi)型可以再分配給它。
我們舉個(gè)例子來(lái)解釋下上述話語(yǔ),如下所示:
- 我們定義了一個(gè)變量amazing,給其賦予了never類(lèi)型。
- 我們分別給它賦了不同類(lèi)型的值,全部編譯失敗,因?yàn)樗鼰o(wú)法再進(jìn)行細(xì)分了。
let amazing: never; amazing = 12;// 報(bào)錯(cuò):amazing是never類(lèi)型不能分配給number類(lèi)型 amazing = true;// 報(bào)錯(cuò):amazing是never類(lèi)型不能分配給boolean類(lèi)型 amazing = "真神奇";// 報(bào)錯(cuò):amazing是never類(lèi)型不能分配給string類(lèi)型 amazing = {};// 報(bào)錯(cuò):amazing是never類(lèi)型不能分配給{}類(lèi)型 amazing = [];// 報(bào)錯(cuò):amazing是never類(lèi)型不能分配給[]類(lèi)型
剔除聯(lián)合類(lèi)型中的屬性
有一組聯(lián)合類(lèi)型"a" | "b" | "c" | "d",我們想剔除屬性b和c,在TS中提供了一個(gè)名為Exclude的函數(shù),它可以用來(lái)做這件事,接受兩個(gè)參數(shù):
- UnionType 聯(lián)合類(lèi)型
- ExcludedMembers 需要進(jìn)行剔除的屬性
使用方法如下所示:
type P = Exclude<"a" | "b" | "c" | "d", "b" | "c"> // "a" | "d"
將對(duì)象中的所有屬性轉(zhuǎn)為聯(lián)合類(lèi)型
有一個(gè)對(duì)象它包含2個(gè)可選屬性name、title,我們想把它轉(zhuǎn)為聯(lián)合類(lèi)型name | title ,在TS中提供了一個(gè)名為keyof的函數(shù),他可以用來(lái)處理這個(gè)問(wèn)題,使用方法如下所示:
type A = { [P in "name" | "title"]?: string }; type UnionType = keyof A; // "name" | "title"
實(shí)現(xiàn)互斥類(lèi)型
有了前置知識(shí)作為鋪墊,接下來(lái)我們就可以將其利用起來(lái),定義一個(gè)互斥類(lèi)型出來(lái),解決文章開(kāi)頭所講述的問(wèn)題。
接下來(lái),我們來(lái)梳理下實(shí)現(xiàn)思路:
- 實(shí)現(xiàn)一個(gè)排除類(lèi)型,用于從A對(duì)象類(lèi)型中剔除B對(duì)象類(lèi)型中的屬性,并將排除后的屬性類(lèi)型設(shè)為never,得到一個(gè)新對(duì)象類(lèi)型。
- 基于排除類(lèi)型實(shí)現(xiàn)互斥類(lèi)型,將A、B對(duì)象類(lèi)型代入排除類(lèi)型中,彼此將其排除,用或運(yùn)算符將二者結(jié)果連接。
聰明的開(kāi)發(fā)者可能已經(jīng)猜到原理了,沒(méi)錯(cuò),就是部分屬性設(shè)為never。??
實(shí)現(xiàn)代碼
接下來(lái),我們來(lái)看下代碼的實(shí)現(xiàn),如下所示:
// 定義排除類(lèi)型:將U從T中剔除, keyof 會(huì)取出T與U的所有鍵, 限定P的取值范圍為T(mén)中的所有鍵, 并將其類(lèi)型設(shè)為never type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never }; // 定義互斥類(lèi)型,T或U只有一個(gè)能出現(xiàn)(互相剔除時(shí),被剔除方必須存在) type XOR<T, U> = (Without<T, U> & U) | (Without<U, T> & T);
注意:為了類(lèi)型的可復(fù)用性,我們使用了泛型,對(duì)此不熟悉的開(kāi)發(fā)者請(qǐng)移步:TypeScript中文網(wǎng)——泛型
測(cè)試用例
我們將文章開(kāi)頭所說(shuō)的問(wèn)題代入上述實(shí)現(xiàn)代碼中,看一下它能否將其解決??,如下所示:
// A類(lèi)型 type A = { name: string; }; // B類(lèi)型 type B = { title: string; }; // A和B兩種類(lèi)型只有一個(gè)能出現(xiàn) type AOrB = XOR<A, B>; // 傳值測(cè)試 const AOrB1: AOrB = { name: "姓名" }; // 編譯通過(guò) const AOrB2: AOrB = { title: "標(biāo)題" }; // 編譯通過(guò) const AOrB3: AOrB = { title: "標(biāo)題", name: "姓名" }; // 報(bào)錯(cuò): Type '{ title: string; name: string; }' is not assignable to type 'AOrB'. const AOrB4: AOrB = { name: "姓名", otherKey: "" }; // 報(bào)錯(cuò):Type '{ name: string; otherKey: string; }' is not assignable to type 'AOrB'.
當(dāng)兩個(gè)屬性同時(shí)出現(xiàn)時(shí),編輯器直接就拋出了類(lèi)型錯(cuò)誤(我們把排除后的所有屬性的類(lèi)型設(shè)為了never,因此當(dāng)你給其賦任何值時(shí)它都會(huì)報(bào)類(lèi)型錯(cuò)誤),如下圖所示:
用例拆解
有一部分開(kāi)發(fā)者可能對(duì)上述測(cè)試用例比較懵,把它們拆開(kāi)都認(rèn)識(shí),因?yàn)榍爸弥R(shí)里都講了,但是寫(xiě)到一起就不認(rèn)識(shí)了??,沒(méi)關(guān)系,那我就把它們都拆解出來(lái)吧,代碼如下所示:
type AOB = ({ name?: never } & { title: string; }) | ({ title?: never } & { name: string; }); // 傳值測(cè)試 const a: AOB = { name: "姓名" }; // 編譯通過(guò) const b: AOB = { title: "標(biāo)題" }; // 編譯通過(guò) const c: AOB = { title: "標(biāo)題", name: "姓名" }; // 報(bào)錯(cuò) const d: AOB = { title: "標(biāo)題", otherKey: "" }; // 報(bào)錯(cuò)
看到這里,可能還有一部分開(kāi)發(fā)者沒(méi)有理解,那就動(dòng)起手來(lái)在編輯器里敲一敲,如果還沒(méi)理解的話,就先把這篇文章收藏,日后有時(shí)間了,在拿出來(lái)學(xué)一學(xué)。
寫(xiě)在最后
至此,文章就分享完畢了。
到此這篇關(guān)于TypeScript中互斥類(lèi)型實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)TypeScript互斥類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解
今天小編就為大家分享一篇bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08js字符串截取函數(shù)substr substring slice使用對(duì)比
字符串截取函數(shù)有substr、substring以及slice等等,下面將為大家介紹下各自的使用,感興趣的朋友可以了解下2013-11-11JavaScript 計(jì)算笛卡爾積實(shí)例詳解
這篇文章主要介紹了JavaScript 計(jì)算笛卡爾積實(shí)例詳解的相關(guān)資料,這里附有實(shí)例代碼,需要的朋友可以參考下2016-12-12JavaScript實(shí)現(xiàn)循環(huán)輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)循環(huán)輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題)
這篇文章主要介紹了詳解小程序云開(kāi)發(fā)攻略(解決最棘手的問(wèn)題),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨
這篇文章主要介紹了CocosCreator怎樣使用cc.follow進(jìn)行鏡頭跟隨,想要學(xué)習(xí)follow的同學(xué),一定要看一下2021-04-04JS實(shí)現(xiàn)橫向與豎向兩個(gè)選項(xiàng)卡Tab聯(lián)動(dòng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)橫向與豎向兩個(gè)選項(xiàng)卡Tab聯(lián)動(dòng)的方法,涉及JavaScript遍歷及動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的方法
這篇文章為大家分享了一個(gè)超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的具體實(shí)現(xiàn)方法,根據(jù)身份證號(hào)對(duì)其進(jìn)行性別的判定,感興趣的小伙伴們可以參考一下2015-11-11