1. 枚举的用法

在讨论枚举的优势之前，我们先回顾一下枚举的用法。

1.1 枚举的定义

枚举在某些情况下用处不大，可以用 type 和联合类型替代

// 数字枚举
enum Direction {
    Up,
    Down,
    Left,
    Right
}
// type Direction = "Up" | "Down" | "Left" | "Right

// 自定义枚举值
enum Gender {
    Male = "男"
    Famale = "女"
}

1.2 访问枚举

枚举在编译后会变成一个对象，其中数字枚举会变成键值对和索引对的对象。

console.log(Direction.Up); // 输出: 0
console.log(Direction[0]); // 输出: Up
console.log(Direction);
// 输出: {
//     '0': 'Up',
//     '1': 'Down',
//     '2': 'Left',
//     '3': 'Right',
//     Up: 0,
//     Down: 1,
//     Left: 2,
//     Right: 3
// }

console.log(Gender.Famale); // 输出："女"
console.log(Gender); // 输出: { Male: '男', Famale: '女' }

2. 枚举的优势

枚举在编译后会变成一个对象，存在于编译后的 js 代码中

使用自定义枚举可以方便地将它的值赋给变量

这意味着枚举不仅是类型约束，更是一个可以使用的变量。

// type 仅作为类型约束
type GenderType = "男" | "女"
const gender: GenderType = "男"
input.value = gender

// enum 可以直接赋值
enum GenderEnum {
    Male = "男",
    Famale = "女",
}
input.value = GenderEnum.Male

2.1 枚举的实际案例

考虑一个用户注册界面，需要选择性别

原来性别选项为男/女，现在产品需要改为帅哥/美女

如果使用了枚举，我们只需要在一个地方进行改动

<div> 
    <button @click="...">{{ Gender.Male }}</button> 
    <button @click="...">{{ Gender.Famale }}</button> 
</div>

export enum Gender {
    Male = "帅哥",
    Famale = "美女",
}

如果项目中多个页面和函数都用到了这个 "男/女" 字面量，使用枚举的优势就体现出来了。

3 枚举的编译结果

下面展示了ts枚举编译为js代码的结果，有兴趣的可以研究一下

3.1 自定义枚举

enum Gender {
    Male = "帅哥",
    Famale = "美女",
}

编译后的 js 代码：

var Gender;
(function (Gender) {
    Gender["Male"] = "\u5E05\u54E5";
    Gender["Famale"] = "\u7F8E\u5973";
})(Gender || (Gender = {}));

3.2 数字枚举

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

编译后的 js 代码：

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));


{
  '0': 'Up',
  '1': 'Down',
  '2': 'Left',
  '3': 'Right',
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3
}

通过这些示例，我们可以看到使用枚举不仅能提高代码的可读性和可维护性，还能方便地进行全局修改，尤其是在大型项目中。

希望本文能帮助你更好地使用 TypeScript 枚举。

何时用ts枚举