TypeScript 数据类型---枚举 (Enum)

一、基础用法

1.默认值

从0开始递增+1

enum Color {Red, Green, Blue}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
console.log('enum',c,d,e) //0,1,2

2.手动设置初始值

第一位未设置的默认0,后面递增.遇到有初始值的,后面的按照初始值+1.

enum Color {Red, Green=2, Blue}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
console.log('enum',c,d,e) //0,2,3

enum Color {Red, Green=2, Blue,Yellow=7 ,Dark}
let c: Color = Color.Red;
let d: Color = Color.Green;
let e: Color = Color.Blue;
let f: Color = Color.Yellow;
let g: Color = Color.Dark;
console.log('enum',c,d,e,f,g) //0 2 3 7 8

3.属性获取

在赋予初始值的时候是以键值对的形式给的,那怎么拿到'键'呢?

enum Color {Red, Green=2, Blue,Yellow=7 ,Dark}
let c1: string = Color[0];
let c: Color = Color.Red;
let d1: string = Color[1];
let d: Color = Color.Green;
let e1: string = Color[2];
let e: Color = Color.Blue;
let f1: string = Color[3];
let f: Color = Color.Yellow;
let g1: string = Color[4];
let g: Color = Color.Dark;
console.log('enum',c1,c,d1,d,e1,e,f1,f,g1,g) //Red 0 undefined 2 Green 3 Blue 7 undefined 8

奇怪的是,为啥会有undefined.这里大胆猜测一下这里的索引,即[0]这里面的0代表的是键所对应的值,因为没有一个键的值是1或者4,所以[1],[4]是undefinend.验证一下

let test: string = Color[8]; //Dark

至少目前看来确实是这样的,属性获取时按照属性对应的值来获取的.

4.设置初始值为字符串

假如设置的字符串不是最后一位,那后面的属性将无法设置默认值.我们之前说过要递增+1,如果前一个是字符串,ts将无法处理初始化.

enum Color {Red, Green=2, Blue,Yellow='b' ,Dark='b'}
let g: Color = Color.Dark;
let test: string = Color['b'];
console.log('enum',g,test) //b undefined

同时我们,发现,并不能用字符串值拿到键位值,那么怎么拿到呢?经过查询资料得知,字符串赋值之后不进行反向映射.故拿不到对应键位值.

5.设置初始值为表达式(其他)

基本是只要能拿到数值的表达式都可以,但是只要有一个字符串即使它在最后一个,也不能用表达值

总结一下:枚举成员可以是纯数值,纯字符串,混合三种情况.涉及字符串混合的限制条件比较多,所以尽量避免字符串的混合.

二、翻译结果

要想明白枚举的用法,最直接的方式就是看翻译成js后的代码.以默认值为例子

ts

enum Color {Red, Green, Pink, Blue,Yellow ,Dark}
let g: Color = Color.Dark;
let h: string = Color[5]

js

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Pink"] = 2] = "Pink";
    Color[Color["Blue"] = 3] = "Blue";
    Color[Color["Yellow"] = 4] = "Yellow";
    Color[Color["Dark"] = 5] = "Dark";
})(Color || (Color = {}));
var g = Color.Dark;
var h = Color[5];

就拿第一个"Red"为例,先是声明了一个变量Color,然后Color["Red"]=0,也就是说给Color新增了一个"Red"属性,并且值为0.然后Color[0]="Red",同时Color新增了一个'0'索引,其对应值为Red.

那其他情况呢?

字符串

ts

enum Color {Red, Green, Pink=7, Blue,Yellow ,Dark=''}
let g: Color = Color.Dark;
let h: string = Color[5]

js

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Pink"] = 7] = "Pink";
    Color[Color["Blue"] = 8] = "Blue";
    Color[Color["Yellow"] = 9] = "Yellow";
    Color["Dark"] = "";
})(Color || (Color = {}));
var g = Color.Dark;
var h = Color[5];

所以必须跟js的数组区分开来,他们的索引并不是按位置排列的.而是初始值.

总结:1.添加的索引为赋予的值,没有就是默认值.2.字符串并没有添加索引,所以无法根据值获得键.