TypeScript 枚举(Enum)

刺骨的言语ヽ痛彻心扉 2023-07-24 08:40 21阅读 0赞

# TypeScript 枚举(Enum) #

本节介绍枚举类型的定义及其使用，需要定义一组相同主题的常量数据时，应该立即想到枚举类型。在学习过程中，需要注意枚举类型的正向映射和反向映射，可以通过编译后的 JavaScript 源码进行分析，为什么可以进行反向映射。

## 1. 慕课解释 ##

使用枚举我们可以定义一些带名字的常量。TypeScript 支持数字的和基于字符串的枚举。

## 2. 定义及使用场景 ##

枚举类型补充了 JavaScript 的设计不足，很多语言都拥有枚举类型。

当我们需要一组相同主题下的数据时，枚举类型就很有用了。

enum Direction { Up, Down, Left, Right }
    
    enum Months { Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec }
    
    enum Size { big = '大', medium = '中', small = '小' }
    
    enum Agency { province = 1, city = 2, district = 3 }

**代码解释：**

代码中通过枚举类型分别声明了：不同的 `方向`，一年内不同的 `月份`，一个商品的不同 `尺寸属性`，经销商的不同 `级别`，这样的一组常量数据，是在一个相同主题下的不同表示。

## 3. 数字枚举与字符串枚举 ##

声明一个枚举类型，如果没有赋值，它们的值默认为**数字类型**且从 0 开始累加：

enum Months {
      Jan,
      Feb,
      Mar,
      Apr
    }
    
    Months.Jan === 0 // true
    Months.Feb === 1 // true
    Months.Mar === 2 // true
    Months.Apr === 3 // true

现实中月份是从 1 月开始的，那么只需要这样：

// 从第一个数字赋值，往后依次累加
    enum Months {
      Jan = 1,
      Feb,
      Mar,
      Apr
    }
    
    Months.Jan === 1 // true
    Months.Feb === 2 // true
    Months.Mar === 3 // true
    Months.Apr === 4 // true

**代码解释：**

第 3 行，从属性 `Jan` 被赋值为 `1` 开始，后续的属性值依次累加。

枚举类型的值为**字符串类型**：

案例演示

enum TokenType {
      ACCESS = 'accessToken',
      REFRESH = 'refreshToken'
    }
    
    // 两种不同的取值写法
    console.log(TokenType.ACCESS === 'accessToken')        // true
    console.log(TokenType['REFRESH'] === 'refreshToken')   // true

[运行案例][Link 1]点击 "运行案例" 可查看在线运行效果

**代码解释：** 枚举的取值，有 `TokenType.ACCESS` 和 `TokenType['ACCESS']` 这两种不同的写法，效果是相同的。

**数字类型和字符串类型可以混合使用，但是不建议：**

enum BooleanLikeHeterogeneousEnum {
        No = 0,
        Yes = "YES",
    }

## 4. 计算常量成员 ##

枚举类型的值可以是一个简单的计算表达式：

案例演示

enum Calculate {
      a,
      b,
      expired = 60 * 60 * 24,
      length = 'imooc'.length,
      plus = 'hello ' + 'world'
    }
    
    console.log(Calculate.expired)   // 86400
    console.log(Calculate.length)    // 5
    console.log(Calculate.plus)      // hello world

[运行案例][Link 2]点击 "运行案例" 可查看在线运行效果

**Tips:**

*  计算结果必须为常量。
 *  计算项必须放在最后。

## 5. 反向映射 ##

所谓的反向映射就是指枚举的取值，不但可以正向的 `Months.Jan` 这样取值，也可以反向的 `Months[1]` 这样取值。

enum Months {
      Jan = 1,
      Feb,
      Mar,
      Apr
    }

将上面的代码进行编译，查看编译后的 JavaScript 代码：

通过查看编译后的代码，可以得出：

console.log(Months.Mar === 3) // true
    
    // 那么反过来能取到 Months[3] 的值吗？
    console.log(Months[3])  // 'Mar'
    
    // 所以
    console.log(Months.Mar === 3)     // true
    console.log(Months[3] === 'Mar')  // true

**Tips:**

1.  字符串枚举成员不会生成反向映射。
2.  枚举类型被编译成一个对象，它包含了正向映射（ name -> value）和反向映射（ value -> name）。

## 6. const 枚举 ##

在枚举上使用 `const` 修饰符：

enum Months {
      Jan = 1,
      Feb,
      Mar,
      Apr
    }
    
    const month = Months.Mar

查看一下编译后的内容：

'use strict'
    const month = 3 /* Mar */

发现枚举类型应该编译出的对象没有了，只剩下 `month` 常量。这就是使用 `const` 关键字声明枚举的作用。因为变量 `month` 已经使用过枚举类型，在编译阶段 TypeScript 就将枚举类型抹去，这也是性能提升的一种方案。

## 7. 枚举合并 ##

分开声明名称相同的枚举类型，会自动合并：

案例演示

enum Months {
      Jan = 1,
      Feb,
      Mar,
      Apr
    }
    
    enum Months {
      May = 5,
      Jun
    }
    
    console.log(Months.Apr) // 4
    console.log(Months.Jun) // 6

[运行案例][Link 3]点击 "运行案例" 可查看在线运行效果

编译后的 JavaScript 代码：

'use strict'
    var Months;
    (function (Months) {
      Months[Months['Jan'] = 1] = 'Jan'
      Months[Months['Feb'] = 2] = 'Feb'
      Months[Months['Mar'] = 3] = 'Mar'
      Months[Months['Apr'] = 4] = 'Apr'
    })(Months || (Months = {}));
    (function (Months) {
      Months[Months['May'] = 5] = 'May'
      Months[Months['Jun'] = 6] = 'Jun'
    })(Months || (Months = {}))
    
    console.log(Months.Apr) // 4
    console.log(Months.Jun) // 6

## 8. 小结 ##

通过本节的介绍需要知道：

*  通过关键字 `enum` 来声明枚举类型。
 *  TypeScript 仅支持基于数字和字符串的枚举。
 *  通过枚举类型编译后的结果，了解到其本质上就是 JavaScript 对象。

[Link 1]: http://www.imooc.com/wiki/run/331.html
[Link 2]: http://www.imooc.com/wiki/run/332.html
[Link 3]: http://www.imooc.com/wiki/run/333.html