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]; 
相关推荐
凌云拓界1 小时前
NodeVerdict:Node.js 原生诊断数据可视化工具
信息可视化·架构·typescript·开源·node.js·github·bug
苏灿烤鱼2 小时前
GitHub Trending 榜首|GitHub #1 拆解|为什么「持久工作台」比临时沙箱更值得关注?(08.06)技术拆解
人工智能·typescript·agent
用户9385156350718 小时前
从"坐电梯"到"前端路由"——深入理解 Hash 路由原理
前端·typescript·全栈
苏灿烤鱼20 小时前
GitHub Trending 榜首|腾讯 Agent 记忆库技术拆解:分层记忆 vs 向量堆,让 AI 不再反复问
typescript·开源·agent
用户938515635071 天前
React 组件设计的三个层次:从类型约束到状态归属,再到纯展示
typescript·全栈
A24207349301 天前
Vue3 + TypeScript:后端数据在表格内渲染后进行增删改的完整实现步骤
前端·javascript·typescript
水獭比特1 天前
AI 视频生成不是一次 HTTP 请求:先把长任务状态机补齐
人工智能·typescript
kyriewen2 天前
别再这样写TypeScript了——Code Review中最常见的8个反模式
前端·javascript·typescript
A24207349302 天前
Vue 3 + TypeScript:核心优势与开发注意事项详解
vue.js·ubuntu·typescript
用户0934077735142 天前
HarmonyOS WPS Open SDK 实践:enableEdit 怎么映射预览与编辑
typescript