TypeScript 字面量類型

本節(jié)介紹三種字面量類型，分別是字符串字面量類型、布爾字面量類型和數(shù)字字面量類型。

1. 慕課解釋

在計算機科學中，字面量（literal）是用于表達源代碼中一個固定值的表示法（notation）。

通俗的講，字面量也可以叫直接量，就是你看見什么，它就是什么。

我們之前介紹字符串類型，其實是一個集合類型，所有的字符串集合在一起構(gòu)成了 string 類型。而字符串字面量類型就直接多了，你定義為 'imooc'，那這個變量的類型就是 'imooc' 類型。

2. 字符串字面量類型

字符串字面量類型允許你指定字符串必須的固定值。

let protagonist: 'Sherlock'

protagonist = 'Sherlock'
protagonist = 'Watson' // Error, Type '"Watson"' is not assignable to type '"Sherlock"'

代碼解釋： 變量 protagonist 被聲明為 'Sherlock' 字面量類型，就只能賦值為 'Sherlock'。

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'

class UIElement {
  animate(dx: number, dy: number, easing: Easing) {
      if (easing === 'ease-in') {}
      else if (easing === 'ease-out') {}
      else if (easing === 'ease-in-out') {}
      else {
          // Error, 不應(yīng)該傳遞 null 或 undefined
      }
  }
}

let button = new UIElement()
button.animate(0, 0, 'ease-in')
button.animate(0, 0, 'uneasy') // Error, 'uneasy' 不被允許

代碼解釋：

第 1 行，通過類型別名，聲明了類型 Easing 為 'ease-in' | 'ease-out' | 'ease-in-out'
這樣三個字符串字面量構(gòu)成的聯(lián)合類型。

第 4 行，你只能從三種允許的字符中選擇其一來做為參數(shù)傳遞，傳入其它值則會產(chǎn)生錯誤。

字符串字面量類型還可以用于區(qū)分函數(shù)重載：

function createElement(tagName: 'img'): HTMLImageElement
function createElement(tagName: 'input'): HTMLInputElement

function createElement(tagName: string): Element {}

代碼解釋：

如果參數(shù) tagName 為 'img' 類型，返回值類型為 HTMLImageElement; 如果參數(shù) tagName 為 'input' 類型，返回值類型為 HTMLInputElement。

3. 布爾字面量類型

聲明布爾字面量類型，注意這里是 : 不是 =。 = 等號是變量賦值，: 表示聲明的類型。

let success: true
let fail: false
let value: true | false

接口的返回值，會有正確返回和異常兩種情況，這兩種情況要有不同的數(shù)據(jù)返回格式：

type Result = { success: true, code: number, object: object } | { success: false, code: number, errMsg: string }

let res: Result = { success: false, code: 90001, errMsg: '該二維碼已使用' }

if (!res.success) {
  res.errMsg // OK
  res.object // Error, Property 'object' does not exist on type '{ success: false; code: number; errMsg: string; }
}

代碼解釋：

類型別名 Result 是一個由兩個對象組成的聯(lián)合類型，都有一個共同的 success 屬性，這個屬性的類型就是布爾字面量類型。因為涉及很多后續(xù)才會介紹的知識點，這里看不懂沒關(guān)系，只需要大概了解這是布爾字面量類型的一種應(yīng)用即可。

4. 數(shù)字字面量類型

TypeScript 還具有數(shù)字字面量類型。

比如骰子只有六種點數(shù)：

let die: 1 | 2 | 3 | 4 | 5 | 6

die = 9 // Error

5. 小結(jié)

本小節(jié)介紹了幾種字面量類型，對于之前沒有接觸過的同學可能是個新的知識點，在類型保護那一節(jié)，我們還會再次介紹到字面量類型，以便鞏固學習。