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]; 
相关推荐
江上暮云6 小时前
TypeScript 极简教程,极速入门!
typescript
幸运小圣6 小时前
动态组件【vue3实战详解】
前端·javascript·vue.js·typescript
purpleseashell_Lili18 小时前
如何学习 AG-UI 和 CopilotKit
javascript·typescript·react
ujainu1 天前
Flutter入门:Dart基础与核心组件速成
javascript·flutter·typescript
DXDZ20222 天前
0526P,CSL05U6U USB3.0静电防护阵列
typescript·intellij-idea·推荐算法
ttod_qzstudio2 天前
TypeScript 中的 Record:从重构工厂函数说起
typescript·record
克喵的水银蛇2 天前
Flutter 弹性布局实战:Row/Column/Flex 核心用法与优化技巧
前端·javascript·typescript
Beginner x_u2 天前
Vue3 + TS + TailwindCSS 操作引导组件开发逐行解析
typescript·vue3·前端开发·tailwindcss·组件开发
by__csdn2 天前
ES6新特性全攻略:JavaScript的现代革命
开发语言·前端·javascript·typescript·ecmascript·es6·js
by__csdn2 天前
Vue 双向数据绑定深度解析:从原理到实践的全方位指南
前端·javascript·vue.js·typescript·前端框架·vue·ecmascript