實現TypeScript中的互斥型別

神奇的程式設計師 發表於 2022-04-11

前言

有這樣一個物件,它有兩個屬性:nametitle,在賦值的時候這兩個屬性只有一個能出現,例如:name出現的時候title就不能出現,title出現的時候name就不能出現。

此時,你會怎麼用TypeScript來定義這個型別?本文將帶大家實現一個互斥型別來解決這個問題,歡迎各位感興趣的開發者閱讀本文。

前置知識

在實現之前,我們需要先來了解幾個基礎的知識。

物件中多屬性同型別的定義

有一個物件它包含5個可選屬性abcde,他們的型別都為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個可選屬性nametitle,我們想把它轉為聯合型別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,因此當你給其賦任何值時它都會報型別錯誤),如下圖所示:

image-20220409221841105

用例拆解

有一部分開發者可能對上述測試用例比較懵,把它們拆開都認識,因為前置知識裡都講了,但是寫到一起就不認識了😹,沒關係,那我就把它們都拆解出來吧,程式碼如下所示:

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: "" }; // 報錯
看到這裡,可能還有一部分開發者沒有理解,那就動起手來在編輯器裡敲一敲,如果還沒理解的話,就先把這篇文章收藏,日後有時間了,在拿出來學一學。

寫在最後

至此,文章就分享完畢了。

我是神奇的程式設計師,一位前端開發工程師。

如果你對我感興趣,請移步我的個人網站,進一步瞭解。

  • 文中如有錯誤,歡迎在評論區指正,如果這篇文章幫到了你,歡迎點贊和關注😊
  • 本文首發於神奇的程式設計師公眾號,未經許可禁止轉載💌