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]; 
相关推荐
90后的晨仔10 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
路光.16 小时前
React中Suspense的分包实践
前端·react.js·typescript
熊猫钓鱼>_>2 天前
仓颉语言:智能应用开发的新范式
ai·typescript·多模态·仓颉·cangjie·智能推荐系统·强类型
时间的情敌2 天前
基于 Vue3 及TypeScript 项目后的总结
前端·vue.js·typescript
Dragon Wu2 天前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
武清伯MVP2 天前
阮一峰《TypeScript 教程》学习笔记——类型映射
笔记·学习·typescript
Pu_Nine_93 天前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
快起来别睡了3 天前
TypeScript装饰器详解:像搭积木一样给代码加功能
前端·typescript
嗷呜~3 天前
error 找不到模块“../views/Login.vue”或其相应的类型声明
typescript·vue3
_光光3 天前
任务队列及大文件上传实现(前端篇)
前端·react.js·typescript