前言
有這樣一個物件,它有兩個屬性:name
與title
,在賦值的時候這兩個屬性只有一個能出現,例如:name出現的時候title就不能出現,title出現的時候name就不能出現。
此時,你會怎麼用TypeScript來定義這個型別?本文將帶大家實現一個互斥型別來解決這個問題,歡迎各位感興趣的開發者閱讀本文。
前置知識
在實現之前,我們需要先來了解幾個基礎的知識。
物件中多屬性同型別的定義
有一個物件它包含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物件型別代入排除型別中,彼此將其排除,用或運算子將二者結果連線。
聰明的開發者可能已經猜到原理了,沒錯,就是部分屬性設為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);
注意:為了型別的可複用性,我們使用了泛型,對此不熟悉的開發者請移步: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,因此當你給其賦任何值時它都會報型別錯誤),如下圖所示:
用例拆解
有一部分開發者可能對上述測試用例比較懵,把它們拆開都認識,因為前置知識裡都講了,但是寫到一起就不認識了?,沒關係,那我就把它們都拆解出來吧,程式碼如下所示:
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: "" }; // 報錯
看到這裡,可能還有一部分開發者沒有理解,那就動起手來在編輯器裡敲一敲,如果還沒理解的話,就先把這篇文章收藏,日後有時間了,在拿出來學一學。
寫在最後
至此,文章就分享完畢了。
我是神奇的程式設計師,一位前端開發工程師。
如果你對我感興趣,請移步我的個人網站,進一步瞭解。
- 文中如有錯誤,歡迎在評論區指正,如果這篇文章幫到了你,歡迎點贊和關注?
- 本文首發於神奇的程式設計師公眾號,未經許可禁止轉載?