掌握 JavaScript 和 TypeScript 中的枚举：终极指南💯

# Web 开发# JavaScript# Typescript# 前端开发

枚举（枚举的简称）是 TypeScript 的一项强大功能，可让您定义一组命名常量。

它们提供了一种对相关值进行分组的方法，使您的代码更具可读性和可维护性。虽然 JavaScript 本身并不支持枚举，但 TypeScript 将它们作为语言功能引入，并且它们可以编译为与 JavaScript 兼容的构造。

本指南深入探讨了 TypeScript 和 JavaScript 中的枚举，涵盖了它们的用例、类型和最佳实践。

什么是枚举？🤔

枚举用于定义一组命名值。这些值通常是相关的，并且具有一组固定的选项。当您想要用人类可读的名称表示一组常量时，枚举会很方便。

**TypeScript 中的示例：**

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

console.log(Direction.Up);    // Output: 1
console.log(Direction.Down);  // Output: 2

  • Direction 枚举有四个成员：上、下、左、右。
  • 第一个成员明确分配了值 1。后续成员自动增加。

    • TypeScript 中的枚举类型

    **TypeScript 提供三种类型的枚举：**

    1- 数字枚举

    这些是最常见的枚举类型。成员以显式或隐式方式用数值初始化。

    **例子：**

    enum Status {
    Active = 0,
    Inactive = 1,
    Pending = 2
}

console.log(Status.Active);    // Output: 0
console.log(Status[1]);        // Output: "Inactive"

    **特征：**

  • 可以使用成员名称或数值（反向映射）来访问成员。
  • 非常适合值具有内在数字关系的场景。

    • 2- 字符串枚举

    在字符串枚举中，每个成员都用字符串文字初始化。

    **例子：**

    enum Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE"
}

console.log(Colors.Red);    // Output: "RED"

    **特征：**

  • 没有反向映射（即，您不能通过其值访问成员）。
  • 当您需要可读且独特的字符串值时很有用。

    • 3- 异构枚举

    这些枚举混合了数字和字符串值。虽然可以这样做，但由于可能造成混淆，因此不建议这样做。

    **例子：**

    enum Mixed {
    Yes = "YES",
    No = 0
}

console.log(Mixed.Yes); // Output: "YES"
console.log(Mixed.No);  // Output: 0

    📍 计算成员和常量成员

    枚举可以具有常量或计算成员：

    常驻成员：

    这些是在编译时解决的，不依赖于运行时计算。

    **例子：**

    enum ConstExample {
    A = 10,
    B = 20,
    C = A + B  // Compile-time computation
}

    计算成员：

    这些问题在运行时得到解决。

    **例子：**

    enum ComputedExample {
    X = "value".length,  // Runtime computation
    Y = Math.random() * 10  // Runtime computation
}

    JavaScript 中的枚举

    虽然 JavaScript 没有内置对枚举的支持，但您可以使用对象或映射实现类似的功能。

    使用对象：

    您可以使用“Object.freeze”使对象不可变，以模拟枚举：

    const Colors = Object.freeze({
    Red: "RED",
    Green: "GREEN",
    Blue: "BLUE"
});

console.log(Colors.Red);    // Output: "RED"

    使用枚举的最佳实践✅

    **1- 使用字符串枚举以提高可读性：**字符串枚举更易于调试并且在日志输出中更具可读性。

    **2- 避免异构枚举：**混合字符串和数字成员可能会导致混淆。

    **3- 谨慎使用枚举：**过度使用枚举会使代码更难重构。对于更简单的情况，请考虑使用“as const”对象或联合类型。

    **4- 记录枚举成员：**为每个成员提供注释或文档以阐明其用途。

    联合类型与枚举🌟

    在 TypeScript 中，联合类型通常可以作为枚举的替代。

    **例子：**

    type Direction = "Up" | "Down" | "Left" | "Right";

let move: Direction;
move = "Up"; // Valid
move = "Invalid"; // Error

    **联合类型的优势：**

  • 无需额外的运行时代码。
  • 更好地与字符串文字类型集成。

    • **何时使用枚举：**

  • 当你需要反向映射时。
  • 当值集需要与数值关联时。

    • 结论

    枚举是 TypeScript 中定义一组相关常量的强大工具。它们可以提高代码的可读性并降低使用无效值的风险。

    虽然 JavaScript 缺乏原生枚举，但您可以使用对象实现类似的功能。

    通过了解枚举的细微差别并遵循最佳实践，您可以在项目中有效地利用它们。

    无论您使用的是 TypeScript 还是 JavaScript，枚举都可以为您的代码带来结构和清晰度，尤其是在大型应用程序中。

    **🌐 与我联系：**

    📍 LinkedIn

    📍X（推特）

    📍 电报

    📍 Instagram

    **编码愉快！**