TypeScript是構(gòu)建可擴(kuò)展JavaScript應(yīng)用的強(qiáng)大工具，幾乎已成為大型Web JavaScript項(xiàng)目的標(biāo)準(zhǔn)。然而，對(duì)于新手來說，TypeScript也存在一些棘手之處，其中之一就是區(qū)分聯(lián)合類型。

考慮以下代碼：

interface Cat {
  weight: number;
  whiskers: number;
}
interface Dog {
  weight: number;
  friendly: boolean;
}
let animal: Dog | Cat;

許多開發(fā)者會(huì)驚訝地發(fā)現(xiàn)，訪問animal時(shí)，只有weight屬性是有效的，whiskers和friendly屬性無效。本文將解釋其中的原因。

在深入探討之前，讓我們快速回顧一下結(jié)構(gòu)類型和名義類型，這將有助于理解TypeScript的區(qū)分聯(lián)合類型。

結(jié)構(gòu)類型

理解結(jié)構(gòu)類型最好的方法是將其與名義類型進(jìn)行對(duì)比。大多數(shù)你可能用過的類型化語(yǔ)言都是名義類型化的。例如C#代碼（Java或C 類似）：

class Foo {
  public int x;
}
class Blah {
  public int x;
}

即使Foo和Blah的結(jié)構(gòu)完全相同，它們也不能相互賦值。以下代碼：

Blah b = new Foo();

會(huì)產(chǎn)生以下錯(cuò)誤：

<code>無法隱式轉(zhuǎn)換類型“Foo”為“Blah”</code>

這些類的結(jié)構(gòu)無關(guān)緊要。Foo類型的變量只能賦值給Foo類的實(shí)例（或其子類）。

TypeScript則相反，它采用結(jié)構(gòu)類型。如果兩個(gè)類型具有相同的結(jié)構(gòu)，TypeScript就認(rèn)為它們是兼容的。

因此，以下代碼可以正常運(yùn)行：

class Foo {
  x: number = 0;
}
class Blah {
  x: number = 0;
}
let f: Foo = new Blah();
let b: Blah = new Foo();

類型作為匹配值的集合

讓我們進(jìn)一步說明這一點(diǎn)。給定以下代碼：

class Foo {
  x: number = 0;
}

let f: Foo;

f是一個(gè)變量，它可以保存任何與Foo類實(shí)例結(jié)構(gòu)相同的對(duì)象，在本例中，這意味著一個(gè)表示數(shù)字的x屬性。這意味著即使是一個(gè)普通的JavaScript對(duì)象也可以被接受。

let f: Foo;
f = {
  x: 0
};

聯(lián)合類型

讓我們回到本文開頭的代碼：

interface Cat {
  weight: number;
  whiskers: number;
}
interface Dog {
  weight: number;
  friendly: boolean;
}

我們知道：

let animal: Dog;

使animal成為任何與Dog接口結(jié)構(gòu)相同的對(duì)象。那么以下代碼是什么意思？

let animal: Dog | Cat;

這將animal類型定義為任何與Dog接口匹配的對(duì)象，或者任何與Cat接口匹配的對(duì)象。

那么為什么現(xiàn)在的animal只允許我們?cè)L問weight屬性呢？簡(jiǎn)單來說，是因?yàn)門ypeScript不知道它是什么類型。TypeScript知道animal必須是Dog或Cat，但它可能是兩者中的任何一個(gè)。如果允許我們?cè)L問friendly屬性，但在實(shí)例中animal實(shí)際上是Cat而不是Dog，則可能會(huì)導(dǎo)致運(yùn)行時(shí)錯(cuò)誤。對(duì)于whiskers屬性也是如此。

聯(lián)合類型是有效值的聯(lián)合，而不是屬性的聯(lián)合。開發(fā)者經(jīng)常寫這樣的代碼：

let animal: Dog | Cat;

并期望animal擁有Dog和Cat屬性的聯(lián)合。但這又是一個(gè)錯(cuò)誤。這指定animal具有一個(gè)值，該值與有效的Dog值和有效的Cat值的聯(lián)合匹配。但是TypeScript只允許你訪問它知道存在的屬性。目前，這意味著聯(lián)合中所有類型的屬性。

類型收窄

現(xiàn)在，我們有：

let animal: Dog | Cat;

當(dāng)animal是Dog時(shí)，我們?nèi)绾握_地將其視為Dog并訪問Dog接口上的屬性，當(dāng)它是Cat時(shí)也同樣處理？目前，我們可以使用in運(yùn)算符。這是一個(gè)你可能不太常看到的舊式JavaScript運(yùn)算符，它允許我們測(cè)試一個(gè)屬性是否存在于一個(gè)對(duì)象中。例如：

let o = { a: 12 };

"a" in o; // true
"x" in o; // false

事實(shí)證明，TypeScript與in運(yùn)算符深度集成。讓我們看看如何使用：

let animal: Dog | Cat = {} as any;

if ("friendly" in animal) {
  console.log(animal.friendly);
} else {
  console.log(animal.whiskers);
}

這段代碼不會(huì)產(chǎn)生錯(cuò)誤。在if塊內(nèi)，TypeScript知道存在friendly屬性，因此將animal轉(zhuǎn)換為Dog。在else塊內(nèi)，TypeScript類似地將animal視為Cat。你甚至可以在代碼編輯器中將鼠標(biāo)懸停在這些塊中的animal對(duì)象上查看這一點(diǎn)。

區(qū)分聯(lián)合類型

你可能期望博文到此結(jié)束，但不幸的是，通過檢查屬性是否存在來收窄聯(lián)合類型非常有限。它對(duì)我們簡(jiǎn)單的Dog和Cat類型很有效，但是當(dāng)我們有更多類型以及這些類型之間更多重疊時(shí)，事情很容易變得更復(fù)雜，也更脆弱。

這就是區(qū)分聯(lián)合類型派上用場(chǎng)的地方。我們將保留之前的所有內(nèi)容，只是向每種類型添加一個(gè)屬性，其唯一作用是區(qū)分（或“區(qū)分”）這些類型：

interface Cat {
  weight: number;
  whiskers: number;
  ANIMAL_TYPE: "CAT";
}
interface Dog {
  weight: number;
  friendly: boolean;
  ANIMAL_TYPE: "DOG";
}

請(qǐng)注意兩種類型上的ANIMAL_TYPE屬性。不要將其誤認(rèn)為是具有兩個(gè)不同值的字符串；這是一個(gè)字面量類型。ANIMAL_TYPE: "CAT";表示一個(gè)恰好包含字符串“CAT”的類型，僅此而已。

現(xiàn)在我們的檢查變得更可靠：

let animal: Dog | Cat = {} as any;

if (animal.ANIMAL_TYPE === "DOG") {
  console.log(animal.friendly);
} else {
  console.log(animal.whiskers);
}

假設(shè)聯(lián)合中參與的每個(gè)類型都具有ANIMAL_TYPE屬性的不同值，則此檢查將萬無一失。

唯一的缺點(diǎn)是你現(xiàn)在需要處理一個(gè)新屬性。每次創(chuàng)建Dog或Cat的實(shí)例時(shí)，都必須為ANIMAL_TYPE提供唯一正確的數(shù)值。但不用擔(dān)心忘記，因?yàn)門ypeScript會(huì)提醒你。?

進(jìn)一步閱讀

如果你想了解更多信息，我建議閱讀TypeScript文檔關(guān)于類型收窄的部分。這將更深入地介紹我們這里討論的內(nèi)容。在該鏈接中有一個(gè)關(guān)于類型斷言的部分。這些允許你定義你自己的自定義檢查來收窄類型，而無需使用類型鑒別器，也無需依賴in關(guān)鍵字。

結(jié)論

在本文開頭，我說過，在以下示例中，為什么weight是唯一可訪問的屬性：

interface Cat {
  weight: number;
  whiskers: number;
}
interface Dog {
  weight: number;
  friendly: boolean;
}
let animal: Dog | Cat;

我們學(xué)到的是，TypeScript只知道animal可以是Dog或Cat，但不能同時(shí)是兩者。因此，我們只能得到weight，它是兩者之間唯一的公共屬性。

區(qū)分聯(lián)合類型的概念是TypeScript區(qū)分這些對(duì)象的方式，并且這種方式非常具有可擴(kuò)展性，即使對(duì)于更大的對(duì)象集合也是如此。因此，我們必須在兩種類型上創(chuàng)建一個(gè)新的ANIMAL_TYPE屬性，該屬性保存我們可以用來檢查的單個(gè)字面量值。當(dāng)然，這是另一件需要跟蹤的事情，但它也產(chǎn)生了更可靠的結(jié)果——這正是我們首先從TypeScript想要得到的。

以上是揭開打字稿歧視工會(huì)的神秘面紗的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！