typescript高级特性-枚举

什么是枚举

枚举是集中管理一组有关联的变量的方法，很多编程语言都提供了enum数据类型，但是javascript却没有。typescript弥补了这一点。

用法

先看一个简单的例子

enum Color {
    white,
    black,
    blue,
    green
}
const currectColor = Color.white

console.log(currectColor) //0

上方的代码中，currentColor会输出0。为什么呢？我们来看看输出的js代码

var Color;
(function (Color) {
    Color[Color["white"] = 0] = "white";
    Color[Color["black"] = 1] = "black";
    Color[Color["blue"] = 2] = "blue";
    Color[Color["green"] = 3] = "green";
})(Color || (Color = {}));
var currectColor = Color.white;
console.log(currectColor);

这是一个匿名立即执行函数。可以看到枚举只是在一个对象中保存了几个变量而已。我们需要重点关注的是内部的赋值语句，以第一行为例

Color[Color["white"] = 0] = "white";

这样看可能会有点晕，我们将这个赋值语句分解

Color["white"] = 0
Color[0] = "white"

注意在javascript中赋值语句会返回被赋值的值，所以上面两端代码是等价的，现在我们就可以知道currentColor为什么会输出0了。现在也可以很容易推断出以下代码的输出结果

console.log(Color[0]) //white

改变与枚举类型关联的数字

默认地，枚举类型的编号会从0开始，然后以1递增，就像上方的代码一样，但是我们也可以通过手动赋值来改变其值

enum Color {
    white, //0
    black, //1
    blue,  //2
    green  //3
}

enum Color {
    white = 3
    black,
    blue,
    green
}

以上代码输出如下

var Color;
(function (Color) {
    Color[Color["white"] = 3] = "white";
    Color[Color["black"] = 4] = "black";
    Color[Color["blue"] = 5] = "blue";
    Color[Color["green"] = 6] = "green";
})(Color || (Color = {}));

可以看到，现在编号从我们赋值的3开始递增。

枚举是开放的(open ended)

看以下代码

enum Color {
    white,
    red,
}

enum Color {
    black = 2,
    blue
}

以上代码生成的js如下

var Color;
(function (Color) {
    Color[Color["white"] = 0] = "white";
    Color[Color["red"] = 1] = "red";
})(Color || (Color = {}));
(function (Color) {
    Color[Color["black"] = 2] = "black";
    Color[Color["blue"] = 3] = "blue";
})(Color || (Color = {}));

可以看到，枚举是可以通过重复声明的方式去扩充的。

用字符串初始化枚举类型

enum Color {
    White = 'white',
    Red = 'red',
}

以上代码输出js如下

var Color;
(function (Color) {
    Color["White"] = "white";
    Color["Red"] = "red";
})(Color || (Color = {}));

可以看到，当我们用字符串去初始化枚举成员时，会直接给Color对象挂载该属性，而不会有编号。所以说明，当我们用字符串初始化某一个枚举成员时，后面所有的成员都必须用字符串初始化，否则ts会报错。因为这时无法确定后面成员的编号。