TypeScript 聯(lián)合類(lèi)型

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

1. 慕課解釋

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

語(yǔ)法為：類(lèi)型一 | 類(lèi)型二。

2. 簡(jiǎn)單示例

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

let currentMonth: string | number

currentMonth = 'February'
currentMonth = 2

代碼解釋?zhuān)?/strong> 第 1 行，表示 currentMonth 的值可以是 string 類(lèi)型或者 number 類(lèi)型中的一種。

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

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

代碼解釋?zhuān)?/strong>

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

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

3. 訪問(wèn)聯(lián)合類(lèi)型成員

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

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

代碼解釋?zhuān)?/strong>

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

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

聯(lián)合類(lèi)型的應(yīng)用場(chǎng)景很多，我們?cè)陬?lèi)型保護(hù)那一節(jié)介紹了大量的聯(lián)合類(lèi)型的例子。

下面再介紹一個(gè)求不同圖形面積的綜合性實(shí)例：