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]; 
相关推荐
遇见你...36 分钟前
TypeScript
前端·javascript·typescript
算是难了10 小时前
Nestjs学习总结_3
前端·typescript·node.js
EaseUI11 小时前
【Ease UI】2026-04-16 组件更新:新增组件 xly-flow-designer 流程设计器 基于warm-flow二次开发
typescript·前端框架·流程设计器·组件库·warmflow
千寻girling12 小时前
被内推的面试 , 第一次
java·前端·python·面试·职场和发展·typescript·node.js
JustNow_Man12 小时前
Bun 常用命令速查清单(TypeScript 编译篇)
前端·javascript·typescript
|晴 天|13 小时前
从零打造现代化个人博客:Vue 3 + TypeScript + Element Plus 完整实战
javascript·css·chrome·typescript·html5·webstorm
大萝卜呼呼14 小时前
Next.js第十七课 - 部署
前端·typescript·next.js
军军君0115 小时前
数字孪生监控大屏实战模板:政务服务大数据
前端·javascript·vue.js·typescript·前端框架·echarts·less
zhensherlock1 天前
Protocol Launcher 系列:Overcast 一键订阅播客
前端·javascript·typescript·node.js·自动化·github·js
|晴 天|2 天前
实现草稿自动保存功能:5秒无操作自动保存
前端·vue.js·typescript