TypeScript中的枚举类型定义方式的优劣对比
一、enum
直接通过enum
定义:
enum Color{ RED, GREEN, BLUE, } console.log(Color.RED) 复制代码
编译成JavaScript的结果如下:
var Color; (function (Color) { Color[Color["RED"] = 0] = "RED"; Color[Color["GREEN"] = 1] = "GREEN"; Color[Color["BLUE"] = 2] = "BLUE"; })(Color || (Color = {})); console.log(Color.RED) 复制代码
这种方式虽然是TypeScript提供的,但其实是非常不好的一种方式,因为在编译完成后,引入了JavaScript中不存在的数据类型:双向Map,能够得到如下结果:
Color[0] // RED Color.RED // 0 Color[1] // GREEN Color.GREEN // 1 Color[2] // BLUE Color.BLUE // 2 复制代码
二、const enum
通过 const enum
定义
const enum Color { RED, GREEN, BLUE } console.log(Color.RED) 复制代码
编译结果如下:
console.log(0 /* RED */); 复制代码
这种方式是在编译时将使用到枚举值的地方直接替换,最终不会编译出枚举的解构,因此在编译完成后的JavaScript代码中,会存在大量的魔术字符串(可能会对排查线上问题时造成一定的影响)。
三、const x = {} as const
使用as const
将对象的属性设置为所有readonly
const Color = { RED: 0, GREEN: 1, BLUE: 2 } as const 复制代码
编译成JavaScript的结果如下:
var Color = { RED: 0, GREEN: 1, BLUE: 2 }; 复制代码
这种方式是定义了一个对象,然后通过as const
将Color中的每个属性都设置成readonly
,且无副作用产生。
总结
建议使用方式三来定义,如有更好的方式或其他见解,欢迎讨论~
作者:Asort
链接:https://juejin.cn/post/7019593685092270116