12.【TypeScript 教程】字面量类型

TypeScript 字面量类型

本节介绍三种字面量类型，分别是字符串字面量类型、布尔字面量类型和数字字面量类型。

1. 解释

在计算机科学中，字面量（literal）是用于表达源代码中一个固定值的表示法（notation）。

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

我们之前介绍字符串类型，其实是一个集合类型，所有的字符串集合在一起构成了 string 类型。而字符串字面量类型就直接多了，你定义为?'mybj'，那这个变量的类型就是?'mybj'?类型。

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, 不应该传递 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'
这样三个字符串字面量构成的联合类型。

第 4 行，你只能从三种允许的字符中选择其一来做为参数传递，传入其它值则会产生错误。

字符串字面量类型还可以用于区分函数重载：

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

function createElement(tagName: string): Element {}

代码解释：

如果参数 tagName 为?'img'?类型，返回值类型为?HTMLImageElement; 如果参数 tagName 为?'input'?类型，返回值类型为?HTMLInputElement。

3. 布尔字面量类型

声明布尔字面量类型，注意这里是?:?不是?=。?=?等号是变量赋值，:?表示声明的类型。

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

接口的返回值，会有正确返回和异常两种情况，这两种情况要有不同的数据返回格式：

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 是一个由两个对象组成的联合类型，都有一个共同的 success 属性，这个属性的类型就是布尔字面量类型。因为涉及很多后续才会介绍的知识点，这里看不懂没关系，只需要大概了解这是布尔字面量类型的一种应用即可。

4. 数字字面量类型

TypeScript 还具有数字字面量类型。

比如骰子只有六种点数：

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

die = 9 // Error

5. 小结

本小节介绍了几种字面量类型，对于之前没有接触过的同学可能是个新的知识点，在类型保护那一节，我们还会再次介绍到字面量类型，以便巩固学习。