Typescript枚举-简化基础

67 阅读3分钟

枚举是一个所有取值的集合的对象,使用枚举在开发应用场景中是比较常见的,比如周一到周日、字典、各种对应的颜色等等。来看看非枚举的代码如下:

const color = (type:string)=>{
    if(type==='red'){
        return 0
    }
    if(type==='green'){
        return 1
    }
    if(type==='blue'){
        reutrn 2
    }
}

以上的有多个if,这样性能不是很好的,而且维护性很差。 再次看看枚举的代码如下:

enum Color{
   red = 0,
   green = 1,
   blue = 2
 }
 // OR
 enum Color{
   red ,
   green,
   blue
 }

为什么不用写自定义的数字,来看看第一节-数字枚举的讲解。

1.数字枚举

数字枚举,很好理解用法,可以写自定义数字也可以不写数字。

enum dend{
    left,
    right,
    top,
    bottom
}
// 结果输出
console.log(dend.left) // 0
console.log(dend.right) // 1
console.log(dend.top) // 2
console.log(dend.bottom) // 3

以上的自定义了数字枚举,可以不使用写数字,一般是从0开始加到N,也就是说从0开始自动增长(加1)。

另外,写自定义的数字枚举如下:

enum gender{
    a = 2,
    b,
    c,
    d,
}
// 结果输出
console.log(gender.a) // 2
console.log(gender.b) // 3
console.log(gender.c) // 4
console.log(gender.d) // 5

就是从gender.a的值为2自动增长到5,分别是gender.a为2、gender.b为3、gender.c为4、gender.d为5。

2.字符串枚举

enum day{
    one='周一',
    two='周二',
    three='周三'
}
console.log(day.one) // 周一

字符串枚举,每个成员都要写字面量。

3.异构枚举

其实枚举可以支持字符串和数字混合

enum Types{
    book = 222,
    win = 'windows'

这种异构枚举比较少见,建议可以不用异构枚举,因为在转译后的javascript不是很好理解阅读代码,如下:

var Types;
(function (Types) {
    Types[Types["book"] = 222] = "book";
    Types["win"] = "windows";
})(Types || (Types = {}));

4.接口枚举

enum Demo{
    q,
    i,
}
interface A {
    red:Demo.q
 }

 let obj33:A = {
    red:Demo.q
 }

定义一个枚举Types 定义一个接口A 他有一个属性red 值为Types.q

5.反向映射

它包含了正向(name->value)和反向(value->name)

注意的是,不会为字符串枚举成员生成反向映射。

enum GenDemo{
    success =200
}
let success:number = GenDemo.success
console.log(success) // 0 

为什么是0?因为这个定义枚举的方式属于自增长,初始化方式默认从0开始,该这个成员就是从这个来的。

enum GenDemo{
    success = 200
}
let key = GenDemo[success] 
console.log(`value---${success}`,`key---${key}`) // vlaue --- 200

反向映射,比如性别枚举 1男 2女 3未知,正取就是通过“男”拿到值:1,反取就是通过 “1”,拿到字面量“男”

再来看看,转译后javascript方式:

var GenDemo;
(function (GenDemo) {
    GenDemo[GenDemo["success"] = 200] = "success";
})(GenDemo || (GenDemo = {}));

步骤: 1.执行函数为GenDemo添加属性; 2.GenDemo[GenDemo["success"] = 200]返回200; 3.再次赋值为[GenDeomo[200]= success]返回success;

5.const枚举

const enum TypesEquip{
    No = "No",
    Yes = 1,
 }

千万不能用var和let来声明,这样会报错的,因为为了避免在额外生成的代码出现开销的非直接对枚举成员的访问,所以只能通过const来声明枚举。

6.小结

以上的内容就是基础枚举知识,主要常见枚举是数字和字符串的枚举,虽然它们没什么不同的,但是它们每个成员常量字面量是不同的,另外数字枚举可以是初始化也可以是自定义数字。异构枚举的知识,这个很少常见用到的。反向映射枚举是相当于重要,定义了枚举值,定义了枚举字段或者成员,字段成员到值的映射,那就叫正向映射。反而值到字段成员的映射,那就叫反向映射。

枚举应用场景:日期转换周几、从服务端返回状态、数据字典等等。