TypeScript 枚举(Enum)运用

发布时间：2023-03-30 08:51:25 所属栏目：教程来源：

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

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

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

枚举类型弥补了 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 = , city = , district = }
代码解释：

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

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

enum Months {
Jan,
Feb,
Mar,
Apr
}
Months.Jan === // true
Months.Feb === // true
Months.Mar === // true
Months.Apr === // true
现实中月份是从 1 月开始的，那么只需要这样：

// 从第一个数字赋值，往后依次累加
enum Months {
Jan = ,
Feb,
Mar,
Apr
}
Months.Jan === // true
Months.Feb === // true
Months.Mar === // true
Months.Apr === // true
代码解释：

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

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

enum TokenType {
ACCESS = 'accesstoken',
REFRESH = 'refreshToken'
}
// 两种不同的取值写法
console.log(TokenType.ACCESS === 'accesstoken') // true
console.log(TokenType['REFRESH'] === 'refreshToken') // true
代码解释：枚举的取值，有 TokenType.ACCESS 和 TokenType['ACCESS'] 这两种不同的写法，效果是相同的。

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

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

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

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

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

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

enum Months {
Jan = ,
Feb,
Mar,
Apr
}
将上面的代码进行编译，查看编译后的 JavaScript 代码：

'use strict'
var Months;
(function (Months) {
Months[Months['Jan'] = ] = 'Jan'
Months[Months['Feb'] = ] = 'Feb'
Months[Months['Mar'] = ] = 'Mar'
Months[Months['Apr'] = ] = 'Apr'
})(Months || (Months = {}))
通过查看编译后的代码，可以得出：

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

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!