TypeScript 聯(lián)合類型

本節(jié)介紹聯(lián)合類型，它使用管道符 | 把多個類型連起來，表示它可能是這些類型中的其中一個。我們把 | 理解成 or，這樣便于輕松記憶。

1. 慕課解釋

聯(lián)合類型與交叉類型很有關(guān)聯(lián)，但是使用上卻完全不同。區(qū)別在于：聯(lián)合類型表示取值為多種中的一種類型，而交叉類型每次都是多個類型的合并類型。

語法為：類型一 | 類型二。

2. 簡單示例

聯(lián)合類型之間使用豎線 “|” 分隔：

let currentMonth: string | number

currentMonth = 'February'
currentMonth = 2

代碼解釋： 第 1 行，表示 currentMonth 的值可以是 string 類型或者 number 類型中的一種。

聯(lián)合類型的構(gòu)成元素除了類型，還可以是字面量：

type Scanned = true | false
type Result = { status: 200, data: object } | { status: 500, request: string}

代碼解釋：

第 1 行，表示類型別名 Scanned 可以是 true 或者 false 兩種布爾字面量中的一種。

第 2 行，表示類型別名 Result 可以是 { status: 200, data: object } 或者 { status: 500, request: string} 兩個對象字面量中的一種。

3. 訪問聯(lián)合類型成員

如果一個值是聯(lián)合類型，那么只能訪問聯(lián)合類型的共有屬性或方法。

interface Dog {
  name: string,
  eat: () => void,
  destroy: () => void
}

interface Cat {
  name: string,
  eat: () => void,
  climb: () => void
}

let pet: Dog | Cat
pet!.name    // OK
pet!.eat()   // OK
pet!.climb() // Error

代碼解釋：

第 13 行，聲明變量 pet 為 Dog | Cat 聯(lián)合類型，那么變量 pet 可以訪問接口 Dog 和 接口 Cat 共有的 name 屬性和 eat() 方法。訪問接口 Cat 獨有的 climb() 方法是錯誤的。

4. 可辨識聯(lián)合

聯(lián)合類型的應(yīng)用場景很多，我們在類型保護那一節(jié)介紹了大量的聯(lián)合類型的例子。

下面再介紹一個求不同圖形面積的綜合性實例：

代碼解釋：

第 18 行，函數(shù) area() 的參數(shù)是一個 Rectangle | Circle | Parallelogram 聯(lián)合類型。

其中，每個接口都有一個 type 屬性，根據(jù)其不同的字符串字面量類型引導到不同的 case 分支，這種情況我們稱之為『可辨識聯(lián)合（Discriminated Union）』。

5. 小結(jié)

本節(jié)介紹了高級類型中的聯(lián)合類型，下節(jié)開始介紹類型別名。需要記住的是：

• 把 | 理解成 or，便于記憶。
• 如果一個值是聯(lián)合類型，那么只能訪問聯(lián)合類型的共有屬性或方法。