TypeScript 中 Redux 操作的枚举答案

【问题标题】：Enums for Redux actions in TypeScriptTypeScript 中 Redux 操作的枚举
【发布时间】：2020-03-02 12:26:43
【问题描述】：

我最近阅读了很多对 TypeScript 的 enum 表示不满的意见文章。具体来说，有人告诉我，对于 Redux 操作，以下做法是不好的做法：

export enum TODOS {
  ADD: 'ADD',
  REMOVE: 'REMOVE',
}

而不是更喜欢字符串文字：

export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';

这是更好的做法吗？如果是，为什么？在我看来，拥有enums 的好处是没有冲突，并且一流的命名空间（例如，两个类似的服务，比如两个数据库服务，可以导出CREATE_TABLE 操作，而无需延长使用命名空间命名以防止冲突）

我找不到博客文章的链接，但基本原则是：

将任何数值分配给枚举：

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

const strangeWay = 27 as Direction

当然，不适用于字符串枚举

“运行时影响”，我不记得给出的参数。 Here's a Reddit post，声明相同，但没有给出任何关于运行时含义的推理，只是需要考虑的不仅仅是字符串

编辑：请注意，我不是在寻找意见。我正在寻找选择这种模式的含义

【问题讨论】：

恕我直言，这不一定是一种不好的做法，而不是一种意见。您使用枚举的方法似乎是获得更多“安全”/“类型安全”的解决方法。因此，我建议您查看：typesafe-actions 包。
我遇到了问题，但不记得是什么问题了。我认为这与字符串枚举如何不获取反向映射有关。这是一个非常本地化的问题。
我将枚举用于 redux 操作并赢得了很多类型安全。不明白为什么要把这种做法贴上“坏习惯”的标签。（强烈支持枚举的意见：christianlydemann.com/how-to-design-redux-apps-for-scalability）
@NickBull 我想，我完全理解你的意思。您（某处）阅读并听到了某些内容，并希望我们考虑该模式可能存在的问题。你为什么不提出他们的论点并询问这是正确的还是合理的？这对我们来说会更容易，并且可能会吸引一些人来回答。如果表达不满的文章的作者有强烈的论据：分享它们。
@Andreas_D 非常抱歉！我以为我在底部包含了链接。昨天对我来说是糟糕的一天:)

标签： typescript redux enums

【解决方案1】：

在我看来，拥有枚举的好处是不会发生冲突，并且一流的命名空间（例如，两个行为相似的服务，比如两个数据库服务，可以导出 CREATE_TABLE 操作，而无需延长名称使用命名空间来防止冲突）

这就是为什么这是一个坏主意。编译后的 JavaScript 中没有冲突/命名空间效果。

export enum Example {
    foo ='foo',
    bar ='bar'
}

export enum Example2 {
    foo = 'foo',
    bar = 'bar'
}

console.log(Example.foo === Example2.foo)

编译成：

export var Example;
(function (Example) {
    Example["foo"] = "foo";
    Example["bar"] = "bar";
})(Example || (Example = {}));
export var Example2;
(function (Example2) {
    Example2["foo"] = "foo";
    Example2["bar"] = "bar";
})(Example2 || (Example2 = {}));
console.log(Example.foo === Example2.foo);

在编译后的 JavaScript 中，两个枚举值将是相同的。它们解析为具有纯字符串值的简单对象。因此，两个使用 CREATE_TABLE 的不同枚举都将导致 'CREATE_TABLE' 作为字符串的相同操作名称。

TypeScript 编译器抱怨这个表达式总是会产生false，但事实并非如此。因此，通过这种方式，您引入了 TypeScript 编译器不可见的潜在错误。最好坚持使用 const 字符串作为操作名称。

【讨论】：