TS-常量枚举

如果使用普通的数值枚举或字符串枚举,在编译成JavaScript代码后会产生较多代码来支持各项功能,开销较大且可读性较差,而且很可能被人误用。例如,使用索引查找或反向映射会导致可读性进一步变差,出错率进一步提高。

要解决上述问题,使用常量枚举。要定义常量枚举,只需在普通枚举的定义前面加上const关键字,示例代码如下。

复制代码
const enum Answer {
    no,
    yes,
}
 
let actualAnswer: Answer = Answer.yes;

此时如果编译这段代码,你可以发现它与普通枚举编译后产生的JavaScript代码存在区别。以下是普通枚举编译后产生的JavaScript代码。

复制代码
var Answer;
(function (Answer) {
    Answer[Answer["no"] = 0] = "no";
    Answer[Answer["yes"] = 1] = "yes";
})(Answer || (Answer = {}));
var actualAnswer = Answer.yes;

以下是常量枚举编译后产生的JavaScript代码,整体上更精简。

复制代码
var actualAnswer = 1 /* yes */;

如果对常量枚举使用索引查找或反向映射,编译将无法通过,示例代码如下。

复制代码
let inputString: string = "yes";
//编译错误:只有使用字符串文本才能访问常数枚举成员。ts(2476)
let userAnswer: Answer = Answer[inputString]; 
//编译错误:只有使用字符串文本才能访问常数枚举成员。ts(2476)
let nameOfyes: string = Answer[Answer.yes]; 
相关推荐
叫我阿柒啊4 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
烛阴6 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
拜无忧10 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
冰冷的bin10 小时前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
Bug生产工厂16 小时前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
烛阴1 天前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓1 天前
Typescript入门-类型断言讲解
前端·javascript·typescript
Thetimezipsby1 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
流影ng2 天前
【TypeScript】闭包
typescript