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