TypeScript枚举Enum的具体使用
TypeScript 枚举通过命名常量、类型安全和结构化组织，显著提升代码质量。使用时需根据场景选择合适的类型（数字、字符串或常量枚举），并权衡性能与动态访问需求。掌握其特性和使用的场景，能在复杂项目中有效提升代码的可维护性和健壮性。接下来我会通过案例，深入解读Enum。
一、枚举的核心作用
替代魔法值 用有意义的名称取代硬编码数字或字符串，减少代码歧义。
enum StatusCode { Success = 200, NotFound = 404 }
if (response.status === StatusCode.Success) { ... } // 比直接判断200更清晰类型安全 限制变量只能使用枚举成员，编译器会在赋值或比较时检查类型。
enum Direction { Up, Down }
let dir: Direction = Direction.Up; // 正确
dir = 3; // 错误：不能将数字直接赋值给枚举类型组织相关常量 将逻辑关联的常量归类，便于维护和扩展。
enum LogLevel { Info, Warn, Error }二、枚举的类型与语法
1. 数字枚举（默认）
成员默认从 0 开始自增，也可手动赋值。
支持反向映射：通过值获取名称（仅数字枚举）。
enum Direction {
Up = 1, // 显式赋值
Down, // 自动递增为2
Left = 4,
Right, // 自动递增为5
}
console.log(Direction.Down); // 输出: 2
console.log(Direction[2]); // 输出: "Down"（反向映射）2. 字符串枚举
成员必须显式初始化字符串值。
无反方向映射，适用于需明确语义的场景。
enum LogLevel {
Info = "INFO",
Warn = "WARN",
Error = "ERROR"
}
console.log(LogLevel.Info); // 输出: "INFO"3. 常量枚举（const enum）
编译时被完全内联，无运行时对象。
提升性能，但无法反射或动态访问。
const enum Size { Small, Medium }
let size = Size.Small; // 编译后：let size = 0;4. 异构枚举（不推荐）
混合数字和字符串成员，易引发混乱。
enum BooleanLikeEnum {
No = 0,
Yes = "YES",
}5. 同名枚举合并
多个同名的 Enum 结构会自动合并。
enum Foo {
A,
}
enum Foo {
B = 1,
}
enum Foo {
C = 2,
}
// 等同于
enum Foo {
A,
B = 1，
C = 2
}三、枚举的高级特性
1. 计算成员与常量成员
常量成员：值在编译时确定（字面量、其他常量成员引用）。
计算成员：值在运行时计算（需显式初始化后续成员）。
enum FileAccess {
None, // 常量成员 0
Read = 1 << 1, // 计算成员 2
Write = 1 << 2, // 计算成员 4
ReadWrite = Read | Write, // 计算成员 6
// 后续成员必须显式初始化
Execute = 8
}2. 枚举作为类型
限制变量或参数只能为枚举成员值，这是枚举的一个缺点。
enum UserRole { Admin, Guest }
function setRole(role: UserRole) { ... }
setRole(UserRole.Admin); // 正确
setRole(2); // 错误：类型不符四、枚举的优缺点对比
| 优点 | 缺点 |
|---|---|
| 提升代码可读性 | 编译后生成额外代码（非 const enum） |
| 编译时类型检查 | 字符串枚举不支持反向映射 |
| 支持反向映射（数字枚举） | 异构枚举易导致逻辑混乱 |
| 便于统一管理常量 | 动态访问可能绕过类型检查（数字枚举） |
五、使用场景
优先使用字符串枚举 提高代码自描述性，避免数字枚举的隐式歧义。
性能敏感场景用
const enum减少生成代码量，但需确保无需动态访问枚举。替代方案考量
- 联合类型：适用于简单且无需反向映射的场景。
type LogLevel = 'INFO' | 'WARN' | 'ERROR';
- 对象常量：需手动冻结对象防止修改，无类型约束。
const LogLevel = { Info: 'INFO' } as const;
- 联合类型：适用于简单且无需反向映射的场景。
引用一个例子：Enum 结构比较适合的场景是，成员的值不重要，名字更重要，从而增加代码的可读性和可维护性。
enum Operator {
ADD,
DIV,
MUL,
SUB
}
function compute(
op:Operator,
a:number,
b:number
) {
switch (op) {
case Operator.ADD:
return a + b;
case Operator.DIV:
return a / b;
case Operator.MUL:
return a * b;
case Operator.SUB:
return a - b;
default:
throw new Error('wrong operator');
}
}
compute(Operator.ADD, 1, 3) // 4 上面示例中，Enum 结构Operator的四个成员表示四则运算“加减乘除”。代码根本不需要用到这四个成员的值，只用成员名就够了。
六、示例对比
枚举 vs 联合类型
枚举方案：
enum Theme { Dark = 'dark', Light = 'light' }
function setTheme(theme: Theme) { ... }
setTheme(Theme.Dark);联合类型方案：
type Theme = 'dark' | 'light';
function setTheme(theme: Theme) { ... }
setTheme('dark');对比：
- 枚举集中管理常量，修改时只需调整枚举定义。
- 联合类型无需生成额外代码，适合简单场景。
到此这篇关于TypeScript枚举Enum的具体使用的文章就介绍到这了,更多相关TypeScript枚举Enum内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在今年某个可视化大屏项目中,出现了一个问题,项目在运行一段时间后,页面出现了崩溃,而且是大概运行几天之后,因为大屏项目是部署到客户现场大屏,长时间运行不关闭,小编认为 Echarts 图表渲染导致了内存泄漏,本文将深入分析这一问题,并提供解决方案2023-10-10
这篇文章旨在深入挖掘JavaScript，以及向大家解释JavaScript是如何工作的。非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
下面小编就为大家带来一篇浅谈html转义及防止javascript注入攻击的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要为大家介绍了JavaScript的Set数据结构，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要为大家详细介绍了javascript html5轻松实现拖动功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了javascript实现平滑无缝滚动的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了js身份证判断方法支持15位和18位,需要的朋友可以参考下2014-03-03
动态表格是指在网页上显示的数据表格,可以根据用户输入或页面元素的变化动态更新内容,本文主要介绍了JavaScript实现动态表格的示例代码,感兴趣的可以了解一下2024-04-04
本篇文章主要教给大家如何在javascript中动态加载按顺序加载运行js的方法以及实现代码，需要的朋友参考学习下吧。2017-12-12
这篇文章主要给大家总结介绍了关于JS中循环遍历数组的四种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论