前言

有這樣一個對象，它有兩個屬性：name與title，在賦值的時候這兩個屬性只有一個能出現(xiàn)，例如：name出現(xiàn)的時候title就不能出現(xiàn)备闲，title出現(xiàn)的時候name就不能出現(xiàn)。

此時捅暴，你會怎么用TypeScript來定義這個類型恬砂？本文將帶大家實(shí)現(xiàn)一個互斥類型來解決這個問題，歡迎各位感興趣的開發(fā)者閱讀本文蓬痒。

前置知識

在實(shí)現(xiàn)之前泻骤，我們需要先來了解幾個基礎(chǔ)的知識。

對象中多屬性同類型的定義

有一個對象它包含5個可選屬性a梧奢、b狱掂、c、d亲轨、e符欠，他們的類型都為string，大多數(shù)人的定義方式應(yīng)該如下所示：

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养筒，它是所有類型的子類型，無法再進(jìn)行細(xì)分端姚，也就意味著除了其本身沒有類型可以再分配給它晕粪。

我們舉個例子來解釋下上述話語，如下所示：

• 我們定義了一個變量amazing渐裸，給其賦予了never類型巫湘。
• 我們分別給它賦了不同類型的值，全部編譯失敗，因?yàn)樗鼰o法再進(jìn)行細(xì)分了。

let amazing: never;
amazing = 12;// 報錯：amazing是never類型不能分配給number類型
amazing = true;// 報錯：amazing是never類型不能分配給boolean類型
amazing = "真神奇";// 報錯：amazing是never類型不能分配給string類型
amazing = {};// 報錯：amazing是never類型不能分配給{}類型
amazing = [];// 報錯：amazing是never類型不能分配給[]類型

剔除聯(lián)合類型中的屬性

有一組聯(lián)合類型"a" | "b" | "c" | "d"携兵，我們想剔除屬性b和c进陡，在TS中提供了一個名為Exclude的函數(shù)，它可以用來做這件事蕾殴，接受兩個參數(shù)：

• UnionType 聯(lián)合類型
• ExcludedMembers 需要進(jìn)行剔除的屬性

使用方法如下所示：

type P = Exclude<"a" | "b" | "c" | "d", "b" | "c"> // "a" | "d"

將對象中的所有屬性轉(zhuǎn)為聯(lián)合類型

有一個對象它包含2個可選屬性name、title棒仍，我們想把它轉(zhuǎn)為聯(lián)合類型name | title讯柔，在TS中提供了一個名為keyof的函數(shù)抡蛙，他可以用來處理這個問題，使用方法如下所示：

type A =  { [P in "name" | "title"]?: string };

type UnionType = keyof A; // "name" | "title"

實(shí)現(xiàn)互斥類型

有了前置知識作為鋪墊魂迄，接下來我們就可以將其利用起來粗截，定義一個互斥類型出來，解決文章開頭所講述的問題捣炬。

接下來熊昌，我們來梳理下實(shí)現(xiàn)思路：

• 實(shí)現(xiàn)一個排除類型，用于從A對象類型中剔除B對象類型中的屬性遥金，并將排除后的屬性類型設(shè)為never浴捆，得到一個新對象類型。
• 基于排除類型實(shí)現(xiàn)互斥類型稿械，將A选泻、B對象類型代入排除類型中，彼此將其排除美莫，用或運(yùn)算符將二者結(jié)果連接页眯。

聰明的開發(fā)者可能已經(jīng)猜到原理了，沒錯厢呵，就是部分屬性設(shè)為never窝撵。??

實(shí)現(xiàn)代碼

接下來，我們來看下代碼的實(shí)現(xiàn)襟铭，如下所示：

// 定義排除類型：將U從T中剔除, keyof 會取出T與U的所有鍵, 限定P的取值范圍為T中的所有鍵, 并將其類型設(shè)為never
type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };

// 定義互斥類型碌奉，T或U只有一個能出現(xiàn)（互相剔除時，被剔除方必須存在）
type XOR<T, U> = (Without<T, U> & U) | (Without<U, T> & T);

注意：為了類型的可復(fù)用性寒砖，我們使用了泛型赐劣，對此不熟悉的開發(fā)者請移步：TypeScript中文網(wǎng)——泛型

測試用例

我們將文章開頭所說的問題代入上述實(shí)現(xiàn)代碼中，看一下它能否將其解決??哩都，如下所示：

// A類型
type A = {
  name: string;
};

// B類型
type B = {
  title: string;
};

// A和B兩種類型只有一個能出現(xiàn)
type AOrB = XOR<A, B>;

// 傳值測試
const AOrB1: AOrB = { name: "姓名" }; // 編譯通過
const AOrB2: AOrB = { title: "標(biāo)題" }; // 編譯通過
const AOrB3: AOrB = { title: "標(biāo)題", 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'.

當(dāng)兩個屬性同時出現(xiàn)時魁兼，編輯器直接就拋出了類型錯誤（我們把排除后的所有屬性的類型設(shè)為了never，因此當(dāng)你給其賦任何值時它都會報類型錯誤）漠嵌，如下圖所示：

[站外圖片上傳中...(image-6c13e7-1649637918399)]

用例拆解

有一部分開發(fā)者可能對上述測試用例比較懵咐汞，把它們拆開都認(rèn)識，因?yàn)榍爸弥R里都講了儒鹿，但是寫到一起就不認(rèn)識了??化撕，沒關(guān)系，那我就把它們都拆解出來吧挺身，代碼如下所示：

type AOB = ({ name?: never } & {
      title: string;
    }) | ({ title?: never } & {
      name: string;
    });

// 傳值測試
const a: AOB = { name: "姓名" }; // 編譯通過
const b: AOB = { title: "標(biāo)題" }; // 編譯通過
const c: AOB = { title: "標(biāo)題", name: "姓名" }; // 報錯
const d: AOB = { title: "標(biāo)題", otherKey: "" }; // 報錯

看到這里侯谁，可能還有一部分開發(fā)者沒有理解，那就動起手來在編輯器里敲一敲，如果還沒理解的話墙贱，就先把這篇文章收藏热芹，日后有時間了，在拿出來學(xué)一學(xué)惨撇。

寫在最后

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

我是神奇的程序員魁衙，一位前端開發(fā)工程師报腔。

如果你對我感興趣，請移步我的個人網(wǎng)站剖淀，進(jìn)一步了解纯蛾。

• 文中如有錯誤，歡迎在評論區(qū)指正纵隔，如果這篇文章幫到了你翻诉，歡迎點(diǎn)贊和關(guān)注??
• 本文首發(fā)于神奇的程序員公眾號，未經(jīng)許可禁止轉(zhuǎn)載??