TypeScript真香系列-枚举
共 2093字,需浏览 5分钟
·
2021-02-02 10:37
前言
TypeScript真香系列的内容将参考中文文档,但是文中的例子基本不会和文档中的例子重复,对于一些地方也会深入研究。另外,文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码,可以访问TypeScript的在线编译地址,动手操作,印象更加深刻。
概念
枚举是对JavaScript标准数据类型集的扩充,常被用来限定在一定范围内取值的场景。在TypeScript中支持数字和字符串的枚举。我们可以用enum来实现。
数字枚举
先看看一个数字枚举例子:
enum Basketballer{
Yao,
Yi,
Wang
}
Basketballer.Yao; //0
Basketballer.Yi; //1
Basketballer.Wang; //2
我们也可以这样,下面这个方法被称为反向映射,即通过值来访问键:
Basketballer[0]; //"Yao"
Basketballer[1]; //"Yi"
Basketballer[2]; //"Wang"
Basketballer[3]; //undefined
上面的例子,我们没有对Yao或者其它成员进行初始化,如果我们进行初始化:
enum Basketballer{
Yao = 1,
Yi,
Wang
}
Basketballer.Yao; //1
Basketballer.Yi; //2
Basketballer.Wang; //3
Basketballer[1]; //"Yao"
Basketballer[2]; //"Yi"
Basketballer[3]; //"Wang"
从上面可以看出,如果一个成员设了一个值,那么后面相应的值都会递增。但是要注意的是,如果没有什么特殊的目的的话,还是不要对多个成员进行手动赋值。因为有时候可能会导致一些问题:
enum Basketballer{
Yao = 1,
Yi,
Wang = 2,
Zhu,
Zhou,
}
Basketballer[2]; //"Wang"
Basketballer.Yi; //2
一个枚举的简单应用:
enum Basketballer{
Yao = 1,
Yi,
Wang,
Zhu,
Zhou,
}
function one(arg: Basketballer): string{
let num = arg;
switch (num) {
case 1:
return Basketballer[num] + "第一人";
case 2:
return Basketballer[num] + "第二人";
case 3:
return Basketballer[num] + "第二人";
default:
return "篮球";
}
}
one(1); //"Yao第一人"
one(6); // "篮球人"
one("1"); //错误,“1”类型的参数不能分配给Basketballer
在数字枚举中,我们在定义枚举成员值的时候,可以是常量,也可以是计算出来的:
枚举成员值为常量
1、枚举的第一个成员且没有初始化:
enum Basketballer{
Yao
}
Basketballer.Yao; //0
2、不带初始化器并且它之前的成员是一个数字常量:
enum Basketballer1{
Yao, //0
Yi, //1
Wang //2
}
enum Basketballer2{
Yao = 1, //1
Yi, //2
Wang //3
}
3、枚举成员使用常量枚举表达式初始化。当下面条件满足其中之一,就是一个常量枚举表达式:一个枚举表达式字面量(主要是字符串字面量或数字字面量)
enum Man{ a = 1}
一个对之前定义的常量枚举成员的引用(可以是在不同的枚举类型中定义的)
enum Man{ a = 1, b = 2*a}
带括号的常量枚举表达式
enum Man{ a = 1, b = 2*(a +1)}
一元运算符 +, -, ~其中之一应用在了常量枚举表达式
enum Man{ a = 1, b= ~a}
常量枚举表达式做为二元运算符 +, -, *, /, %, <<, >>, >>>, &, |, ^的操作对象。若常数枚举表达式求值后为 NaN或 Infinity,则会在编译阶段报错。
enum Man{ a = 1 << 2}
枚举成员值为计算值
除开上面所举的所有枚举成员都被当作是需要计算出来的值:
enum Man{ a = "abc".length }
字符串枚举
字符串枚举中没有自增的特性,我们在初始化的时候必须给每一个成员都设字符串。
enum Basketballer{
Yao = "篮协主席",
Yi = "牌面",
Wang = "老大哥",
}
Basketballer.Yao; //"篮协主席"
但是字符串枚举没有反向映射:
Basketballer["篮协主席"]; // 错误
异构枚举
异构枚举相当于数字枚举和字符串枚举的结合体,但是官方文档不建议这样写。
enum Basketballer{
Yao = "篮协主席",
Yi = 1,
}
const 枚举
我们可以通过const修饰符来强调当前枚举类型,const枚举只能使用使用常量枚举表达式,而且会在编译阶段被删除。我们可以用const enum来定义:
const enum Man {
A,
B,
C,
D
}
let man = [Man.A, Man.B, Man.C, Man.D];
console.log(man); // [0, 1, 2, 3]
让我们看看编译结果:
let man = [0 /* A */, 1 /* B */, 2 /* C */, 3 /* D */];
console.log(man); // [0, 1, 2, 3]
外部枚举
外部枚举用来描述已经存在的枚举类型的形状,可以用declare enum来定义:
declare enum Man {
A,
B,
C,
D
}
let man = [Man.A, Man.B, Man.C, Man.D];
让我们看看编译结果:
let man = [Man.A, Man.B, Man.C, Man.D];
参考
https://github.com/zhongsp/TypeScript https://github.com/jkchao/typescript-book-chinese
最后
文中有些地方可能会加入一些自己的理解,若有不准确或错误的地方,欢迎指出~