實現TypeScript中的互斥型別

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

前言

有這樣一個物件，它有兩個屬性：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，因此當你給其賦任何值時它都會報型別錯誤），如下圖所示：

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

寫在最後

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

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

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

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

相關文章