前端技术回顾系列 07 ｜有用的 TS 枚举

原创已于 2024-08-07 23:41:02 修改 · 1.4k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #typescript

于 2024-06-09 22:31:11 首次发布

前端技术回顾系列 2024 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了TypeScript中的枚举，包括数字枚举、字符串枚举和常量枚举，强调了它们在状态管理、处理方向等实际场景中的应用，以及如何提高代码的可读性、可维护性和性能。枚举提供了定义和使用常量的直观方式，尤其是在JavaScript中缺乏枚举类型的情况下。

在微信中阅读，欢迎👏👏👏关注公众号：CodeFit。

创作不易，如果你觉得这篇文章对您有帮助，请不要忘了点赞、分享和关注我的公众号：CodeFit，为我的持续创作提供动力。

本系列已经完结啦🎉🎉🎉，下一个内容是 Vue3，欢迎订阅《Vue 3.x 必修课｜ 2024》：http://t.csdnimg.cn/hHRrM，目前持续更新中～🚀🚀🚀

精品内容🥇🥇🥇，物超所值🔥🔥🔥（9.9 元！20+篇内容！）。

上篇内容回顾：类型推断、联合类型、类型断言和类型守卫

在上篇内容中，我们回顾了 TypeScript 中的几个重要概念，这些概念对于编写 类型安全 和健壮的代码至关重要。

类型推断（Type Inference）：TypeScript 自动推断变量的类型，即使没有显式声明类型，变量类型会根据值进行推断。这样可以减少代码中的类型注解，提高可读性。
联合类型（Union Types）：允许一个变量可以是多种类型之一，使用 | 分隔不同的类型。联合类型增强了代码的灵活性，同时保持了类型安全。
类型断言（Type Assertion）：类型断言用于明确告诉编译器变量的具体类型。通过类型断言，我们可以在不知道确切类型的情况下安全地访问变量的属性和方法。
类型守卫（Type Guards）：通过运行时检查（如 typeof、instanceof 或 自定义类型守卫）来细化类型判断，使代码在处理联合类型时更加安全。

可以说，通过这些类型机制，TypeScript 才能使得代码变得更加健壮和易于维护。

大纲

TypeScript 中的枚举（Enums）
什么是枚举？
数字枚举
字符串枚举
常量枚举
示例汇总
实际应用场景
总结

1. TypeScript 中的枚举（Enums）

本文回顾的内容是 TypeScript 中的 枚举（Enum），这是一个用于定义一组常量的 数据类型。

事实上，JavaScript 并没有枚举这个类型，但是可以使用 常量（const） 或 冻结的对象 来模拟枚举。

这种方法虽然可行，但不如 TypeScript 的枚举那么直观和强大。

可以说，TypeScript 为开发者定义和使用一组相关的常量，提供了一种更清晰、更安全的方式。

2. 什么是枚举？

枚举是一种 数据类型，用于定义一组常量（它们在程序执行过程中不会被改变）。

TypeScript 引入枚举后，让前端开发定义和使用一组常量时，有了更好的开发体验。

3. 数字枚举

数字枚举 是最简单的一种枚举，它的成员默认从 0 开始递增。

3.1 定义数字枚举

enum Direction {
  Up,
  Down,
  Left,
  Right
}

在这个例子中，Direction 枚举有四个成员：Up、Down、Left 和 Right，它们的值分别为 0、1、2 和 3。

3.2 使用数字枚举

你可以通过枚举名和成员名来访问枚举值：

console.log(Direction.Up); // 输出: 0
console.log(Direction.Down); // 输出: 1

你也可以通过值来反向查找枚举成员名：

console.log(Direction[0]); // 输出: "Up"
console.log(Direction[1]); // 输出: "Down"

这种双向映射使得枚举非常灵活。

3.3 手动赋值

你可以手动为枚举成员赋值，未赋值的成员会接着上一个成员递增：

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

console.log(Direction.Up); // 输出: 10
console.log(Direction.Down); // 输出: 11

4. 字符串枚举

字符串枚举 的成员是字符串，它们更易于调试和阅读。

4.1 定义字符串枚举

enum Response {
  Yes = "YES",
  No = "NO"
}

console.log(Response.Yes); // 输出: "YES"

在这个例子中，Response 枚举的成员值是字符串。

4.2 使用字符串枚举

console.log(Response.Yes); // 输出: "YES"
console.log(Response.No); // 输出: "NO"

字符串枚举不能进行反向查找，但它们在处理和调试时非常有用。

5. 常量枚举

常量枚举 用于在编译时生成更加优化的代码，提高性能。

它通过 const 关键字声明。

5.1 定义常量枚举

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

使用常量枚举后，编译后的 JavaScript 代码会直接内联枚举值，而不会生成额外的枚举对象。

5.2 使用常量枚举

const direction = Direction.Up;
console.log(direction); // 输出: 0

编译后的代码：

var direction = 0; // 直接内联了枚举值
console.log(direction); // 输出: 0

如上代码所示，常量枚举在编译时会被内联到使用它们的地方，而不会生成实际的枚举对象。

这意味着在生成的 JavaScript 代码中，不会有枚举的定义，只会有枚举成员的具体值。

这种内联优化减少了代码的体积，并提高了运行时的性能。

6. 示例汇总

对于纯前端开发者来说，枚举的概念可能还是比较陌生的，这里有必要总结一下这些概念，并把代码进行汇总，以展示它们的用法。

// 数字枚举
enum Direction {
  Up,
  Down,
  Left,
  Right
}

console.log(Direction.Up); // 输出: 0
console.log(Direction[0]); // 输出: "Up"

// 字符串枚举
enum Response {
  Yes = "YES",
  No = "NO"
}

console.log(Response.Yes); // 输出: "YES"

// 常量枚举
const enum ConstDirection {
  Up,
  Down,
  Left,
  Right
}

let dir = ConstDirection.Up;
console.log(dir); // 输出: 0

7. 实际应用场景

枚举在许多实际应用场景中都非常有用，例如：

使用枚举进行 状态管理，下面是一个例子。

enum Status {
  Active,
  Inactive,
  Pending
}

function checkStatus(status: Status) {
  switch (status) {
    case Status.Active:
      console.log("Status is Active");
      break;
    case Status.Inactive:
      console.log("Status is Inactive");
      break;
    case Status.Pending:
      console.log("Status is Pending");
      break;
  }
}

checkStatus(Status.Active); // 输出: Status is Active

当然，使用枚举 处理方向 也非常 ok。

enum Direction {
  Up,
  Down,
  Left,
  Right
}

function move(direction: Direction) {
  switch (direction) {
    case Direction.Up:
      console.log("Moving Up");
      break;
    case Direction.Down:
      console.log("Moving Down");
      break;
    case Direction.Left:
      console.log("Moving Left");
      break;
    case Direction.Right:
      console.log("Moving Right");
      break;
  }
}

move(Direction.Left); // 输出: Moving Left