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中Protobuf到运行时类型安全的转换指南》
javascript·安全·typescript
We་ct6 小时前
LeetCode 228. 汇总区间:解题思路+代码详解
前端·算法·leetcode·typescript
阿蒙Amon15 小时前
TypeScript学习-第10章:模块与命名空间
学习·ubuntu·typescript
VT.馒头20 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
AAA阿giao1 天前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
hedley(●'◡'●)1 天前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
百锦再1 天前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
小杨同学呀呀呀呀1 天前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
VT.馒头2 天前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
guangzan2 天前
为博客园注入现代 UI 体验:shadcn 皮肤上线
typescript·tailwindcss·shadcn ui·tona