为什么Typescript认为我的枚举是未定义的?

时间:2018-05-04 21:53:23

标签: reactjs typescript enums redux

我使用的是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也没有。我已经在线阅读了一大堆试图找到答案,但我最接近的是来自那些没有"导出"他们的枚举上的关键字和我一样。

这可能会发生什么?我很感激任何帮助。

谢谢。

编辑: 它不是它有问题的反向映射,而是枚举的任何用法。这只是我能想到的最短用法。我实际上在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

3 个答案:

答案 0 :(得分:2)

打字稿的这个功能称为"反向映射",根据文档,它仅受数字枚举支持。以下是https://www.typescriptlang.org/docs/handbook/enums.html的摘要:

  

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

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

我所做的是这样:

import {AnimalTypes} from './actions';

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

成功了。 TS v3.6.4

相关问题