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]; 
相关推荐
前端达人21 分钟前
基于React和TypeScript的开源白板项目(Github项目分享)
前端·react.js·typescript·前端框架·github
flytam1 小时前
TypeScript Project References npm 包构建小实践
javascript·typescript·npm
开心小老虎2 小时前
TS_类型
typescript
ALKAOUA1 天前
TypeScript 系列 -- Class 类的语法和继承
前端·typescript
Oscar_02082 天前
微信小程序 typescript 开发日历界面
微信·微信小程序·typescript
Amore05253 天前
React+TS前台项目实战(二十一)-- Search业务组件封装实现全局搜索
前端·react.js·typescript·前端框架
Amd7943 天前
Nuxt3 的生命周期和钩子函数(八)
typescript·生命周期·nuxt3·钩子函数·数据写入·模式扩展·服务器监听
Amore05253 天前
React+TS前台项目实战(二十二)-- 全局常用导出组件Export封装
前端·react.js·typescript·前端框架
开心小老虎3 天前
TS_开发一个项目
typescript
门板_3 天前
解决跨域问题(vite、axios/koa)
typescript·axios·vite·koa·跨域·cors·vue项目笔记