Typescript 中的常量枚举

Question

我有一个使用 Typescript 的 React 应用程序。现在我遇到了 const enum 的问题。这是我的枚举：

export const enum Snack {
    Apple = 0,
    Banana = 1,
    Orange = 2,
    Other = 3
}

我尝试匹配的服务不返回值，而是返回枚举中项目的索引。因此，举例来说，如果用户设置为吃苹果，则服务将为该用户返回 0，而不是“Apple”。理想情况下，我想做类似的事情：

var snackIndex = UserSnack.type; // returning 0 in this example
var userSnack = Snack[snackIndex]; // would return 'Apple'

当我尝试类似的操作时，我收到以下错误：

错误 TS2476：只能使用字符串文字访问 const 枚举成员。

由于我接收数据的服务不返回字符串，因此我在正常工作时遇到问题。

如有任何帮助，我们将不胜感激。

Answer 1

只需删除

const

修饰符即可。

枚举中的

const

表示枚举在编译期间被完全擦除。常量枚举成员在使用站点内联。您不能通过任意值对其进行索引。

换句话说，以下 TypeScript 代码

const enum Snack {
  Apple = 0,
  Banana = 1,
  Orange = 2,
  Other = 3
}

let snacks = [
  Snack.Apple,
  Snack.Banana,
  Snack.Orange,
  Snack.Other
];

编译为：

let Snacks = [
    0 /* Apple */,
    1 /* Banana */,
    2 /* Orange */,
    3 /* Other */
];

---

与非常量版本比较：

enum Snack {
  Apple = 0,
  Banana = 1,
  Orange = 2,
  Other = 3
}

let Snacks = [
  Snack.Apple,
  Snack.Banana,
  Snack.Orange,
  Snack.Other
];

它被编译为：

var Snack;
(function (Snack) {
    Snack[Snack["Apple"] = 0] = "Apple";
    Snack[Snack["Banana"] = 1] = "Banana";
    Snack[Snack["Orange"] = 2] = "Orange";
    Snack[Snack["Other"] = 3] = "Other";
})(Snack || (Snack = {}));
let Snacks = [
    Snack.Apple,
    Snack.Banana,
    Snack.Orange,
    Snack.Other
];

来源：const enums @ typescriptlang.org

Answer 2

在现代 TypeScript 中，当带有

as const

的对象就足够了时，您可能不需要枚举：

export const Snack = {
    Apple: 0,
    Banana: 1,
    Orange: 2,
    Other: 3,
} as const;

现在，当您将鼠标悬停时，您会看到以下类型：

枚举可能会导致大量的代码生成开销。通过将 TypeScript 中的

as const

关键字与 Enum 集成，我们可以显着减少生成的代码量，从而实现更加简化和高效的开发。

📣注意！与枚举一起实现

as const

消除了利用反向映射行为的能力。如果您的代码依赖于此功能，建议避免使用此方法。