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 小时前
vue3 @代指src路径设置
前端·typescript·vue
常宇佳5 小时前
vue3 $refs使用方法
前端·vue.js·typescript
不好听6131 天前
TypeScript 面试必会:工具类型全家桶,从 keyof 到手写 Partial
面试·typescript
嘟嘟07171 天前
从入口到 CRUD:用 NestJS 的模块化与装饰器思想读懂一个后端应用
后端·typescript·nestjs
嘟嘟07171 天前
TypeScript 工具类型通关:Pick、Omit、Partial、Record 区别与 Omit 等价实现一次讲清
设计模式·面试·typescript
何时梦醒1 天前
TypeScript 工具类型一篇讲透:Pick、Omit、Partial、Exclude、Record、ReturnType、keyof
前端·面试·typescript
小林ixn1 天前
TS 工具类型实战:Pick/Omit/Partial/Record 一次讲透,别再 Omit 反了
typescript·代码规范
苏灿烤鱼1 天前
十个 CLI 坐进一间办公室,协调层靠得住吗?
typescript·github·agent
BreezeJiang1 天前
别再死记 TypeScript 工具类型:看懂 Omit 的类型数据流
typescript
breeze jiang1 天前
TypeScript 工具类型怎么记:从 Pick、Omit 到 keyof 与 Exclude 推导
linux·ubuntu·typescript