前置知識(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)解釋下上述話(huà)語(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" | "string"

實(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)——泛型[1]

測(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ò)