视频位置 TypeScript快速梳理_中篇 视频位置 00:24:09

枚举( enum )可以定义⼀组命名常量,它能增强代码的可读性,也让代码更好维护。

如下代码的功能是:根据调⽤ walk 时传⼊的不同参数,执⾏不同的逻辑,存在的问题是调⽤ walk 时传参时没有任何提示,编码者很容易写错字符串内容;并且⽤于判断逻辑的 up 、 down 、 left 、 right 是连续且相关的⼀组值,那此时就特别适合使⽤ 枚举( enum ):

function walk(str:string) {
    if (str === 'up') {
        console.log("向【上】⾛");
    } else if (str === 'down') {
        console.log("向【下】⾛");
    } else if (str === 'left') {
        console.log("向【左】⾛");
    } else if (str === 'right') {
        console.log("向【右】⾛");
    } else {
        console.log("未知⽅向");
    }
}

//测试:
walk('up')
walk('down')
walk('left')
walk('right')

小项目可以用上面的写法,如果在大项目多人合作的时候,上面的写法很容易写错。

1. 数字 枚举

枚举成员的值数字

数字枚举⼀种最常⻅的枚举类型,其成员的值会⾃动递增,且数字枚举还具备反向映射的特点,在下⾯代码的打印中,不难发现:可以通过值来获取对应的枚举成员名称 。

//枚举变量的首字母一般大写。
// 定义⼀个描述【上下左右】⽅向的枚举Direction
enum Direction {
    Up,        //上
    Down,    //下
    Left,    //左
    Right    //右
}

console.log(Direction) // 打印Direction会看到如下内容
/* 
{
    0:'Up', //反向映射
    1:'Down',
    2:'Left',
    3:'Right',
    Up:0,     //数字枚举的递增性
    Down:1,
    Left:2,
    Right:3
}
*/

// 反向映射
console.log(Direction.Up)
console.log(Direction[0]) //
// 此⾏代码报错,枚举中的属性是只读的
Direction.Up = 'shang'

也可以指定枚举成员的初始值,其后的成员值会⾃动递增。:

enum Direction {
 Up = 6,
 Down,
 Left,
 Right
}
console.log(Direction.Up); // 输出: 6
console.log(Direction.Down); // 输出: 7

使用枚举重写上面的例子:

enum Direction {
    Up,
    Down,
    Left,
    Right,
}
function walk(n: Direction) {
    if (n === Direction.Up) {
        console.log("向【上】⾛");
    } else if (n === Direction.Down) {
        console.log("向【下】⾛");
    } else if (n === Direction.Left) {
        console.log("向【左】⾛");
    } else if (n === Direction.Right) {
        console.log("向【右】⾛");
    } else {
        console.log("未知⽅向");
    }
}

//测试:
walk(Direction.Up)
walk(Direction.Down)

2. 字符串 枚举

枚举成员的值字符串。 没有反向映射。

enum Direction {
    Up = "up",
    Down = "down",
    Left = "left",
    Right = "right"
}

let dir: Direction = Direction.Up;
console.log(dir); // 输出: "up"

3. 常量枚举

官⽅描述:常量枚举是⼀种特殊枚举类型,它使⽤ const 关键字定义,在编译时会被内联,避免⽣成⼀些额外的代码。

何为编译时内联?
所谓“内联”其实就是 TypeScript 在编译时,会将枚举成员引⽤替换为它们的实际值,⽽不是⽣成额外的枚举对象。这可以减少⽣成的 JavaScript 代码量,并提⾼运⾏时性能。

使⽤普通枚举的 TypeScript 代码如下:

enum Directions {
    Up,
    Down,
    Left,
    Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼤ :

"use strict";
var Directions;
(function (Directions) {
 Directions[Directions["Up"] = 0] = "Up";
 Directions[Directions["Down"] = 1] = "Down";
 Directions[Directions["Left"] = 2] = "Left";
 Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));
let x = Directions.Up;

使⽤常量枚举的 TypeScript 代码如下:

const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼩:

"use strict";
let x = 0 /* Directions.Up */;