为什么 Typescript 认为我的枚举未定义？答案

【问题标题】：Why does Typescript think my enum is undefined?为什么 Typescript 认为我的枚举未定义？
【发布时间】：2018-10-15 10:46:46
【问题描述】：

我正在使用 Typescript、Redux 和 React，所有这些对我来说都是新的，所以这可能有一个我没有看到的简单修复。

我有一个 actions.ts 文件，其中包含这样的枚举：

export enum AnimalTypes {
    CAT = 'CAT',
    DOG = 'DOG'
}

我将它导入到我的 reducers.ts 文件中，并试图在这样的日志语句中使用它：

import {AnimalTypes} from './actions';

export function someFunction() {
    // Print the word "CAT"
    console.log(AnimalTypes[AnimalTypes.CAT]);
}

当我尝试启动我的网站时收到以下错误：

TypeError: Cannot read property 'CAT' of undefined
  at someFunction (reducer.ts:5)
  at combineReducers.js:20
  etc.

我的 IDE 没有给我任何错误，TSLint 也没有。我在网上阅读了一堆试图找到答案的文章，但最接近我的是来自枚举中没有“export”关键字的人，而我有。

这里会发生什么？如有任何帮助，我将不胜感激。

谢谢。

编辑：问题不是反向映射，而是枚举的任何使用。这只是我能想到的最短用法。我实际上是在 switch 语句中使用它：

import {AnimalTypes} from './actions';

export function otherFunction(animal) {
    switch (animal.type) {
        case AnimalTypes.CAT:
            // Do stuff
}

当我构建上面的代码时，我得到了这个错误Uncaught TypeError: Cannot read property 'CAT' of undefined

【问题讨论】：

someFunction 是否被 actions.ts 调用（可能是间接调用）在AnimalTypes 的定义执行之前？
这是可能的。我如何确定/控制这些事情发生的顺序？
调试器、console.log、检查调用堆栈等
不应该只是console.log(AnimalTypes.CAT);无论如何，为什么要像数组一样访问它？
根据@RyanCavanaugh 的关于查看调用堆栈的建议——我遇到了一个奇怪的错误，枚举以某种方式没有被定义，并且完全出乎意料地提到了一个承诺：Uncaught (in promise) TypeError: Cannot read property 'default' of undefined 在底部在调用堆栈中，有特定文件的所有枚举导入，而导致问题的一个枚举确实是undefined。经过大量的试验和错误，将这些导入移到文件顶部使一切正常。

标签： reactjs typescript enums redux

【解决方案1】：

打字稿的这个功能称为“反向映射”，根据文档，它仅支持数字枚举。这是来自https://www.typescriptlang.org/docs/handbook/enums.html的sn-p：

除了为成员创建一个具有属性名称的对象之外，数字枚举成员也获得从枚举值到的反向映射枚举名称。

【讨论】：

在上面添加了一个更好的示例说明。导致错误的不是反向映射。

【解决方案2】：

我无法重现您的确切情况：我在减速器中导入了一个枚举并创建了记录该枚举的确切函数，并且它起作用了。

但是，我只是在稍微不同的上下文中遇到了同样的问题：我在 SideNav 文件中添加了我的 AppRoutes 枚举的导入。在 SideNav 文件中，在通过一些 JSON 映射并返回一些 TSX 的 const popularArticles 中，当我尝试 <NavLink to={AppRoutes.something}> 时，我得到“无法读取未定义的属性”，即使将鼠标悬停在 IDE 中的 AppRoutes.something 上会显示我来自正确来源的正确值。我认为这与你的情况非常相似，所以我希望我的解决方案能帮助未来的读者遇到这个问题。

为我解决的问题是将const popularArticles（位于 SideNav 类之外）集成到类内部的变量 public popularArticles 中，就在构造函数之前。我不知道为什么，但经过进一步的实验，我发现显然你无法访问类或 SFC 之外的枚举......

【讨论】：

【解决方案3】：

我做的是这样的：

import {AnimalTypes} from './actions';

export function someFunction() {
    var animalTypesEnum = AnimalTypes;
    // Print the word "CAT"
    console.log(animalTypesEnum[animalTypesEnum.CAT]);
}

它奏效了。 TS v3.6.4

【讨论】：