Eslint 说 Typescript 应用程序中的所有枚举“已经在上层范围内声明”

Question

开始一个新的应用程序，我安装了 eslint 并使用以下配置对其进行了配置，但每次我创建一个 enum 时它都说它已经被定义了。甚至是无意义的字符串。其他变量类型（const、var、let）没有这个问题。我可以禁用该规则，但我希望它适用于它实际上是正确的情况。

    {
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": ["./tsconfig.json"],
    "ecmaFeatures": {
      "ecmaVersion": 6,
      "jsx": true
    }
  },
  "overrides": [],
  "extends": [
    "airbnb-typescript",
    "prettier",
    "prettier/@typescript-eslint",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "rules": {
    "spaced-comment": 0,
    "import/prefer-default-export": 0,
    "@typescript-eslint/no-use-before-define": 0,
    "@typescript-eslint/restrict-template-expressions": [
      1,
      { "allowBoolean": true }
    ],
    "react/jsx-props-no-spreading": "off",
    "react/state-in-constructor": 0,
    "react/require-default-props": 0,
    "react/destructuring-assignment": [
      1,
      "always",
      {
        "ignoreClassFields": true
      }
    ]
  }
}

Answer 1

如果您是 TSLint-to-ESLint 的用户，这是 a bug that has since been fixed，因此使用较新版本重新运行脚本也可以解决问题，或者只是禁用 no-shadow 并启用 @typescript-eslint/no-shadow

如果您正在使用一些滥用规则的公共配置，请务必让他们知道，仍然遇到这种情况的人数有些惊人。

---

见@typescript-eslint/no-shadow how to use 还有this section of FAQ

如何使用

{
  // note you must disable the base rule as it can report incorrect errors
  "no-shadow": "off",
  "@typescript-eslint/no-shadow": ["error"]
}

搜索typescript-eslint GitHub issues 显示许多人在问同样的问题。

Answer 2

当我用对象的某个名称声明一个变量时，我会发生此错误。我忘了把变量名放在小写而不是对象名的大写中。比如TypeFile：TypeFile

解决方案：要解决这个问题，只需将变量名小写即可。

生成此 Eslint 错误的代码示例：

这是我的枚举：type-file-model.ts

public enum TypeFichier {
XML, PDF, IMAGE, ZIP
}

这是我的对象模型 app-file-model.ts

import {TypeFile} from 'app/shared/model/enum/type-file.model';

export interface IAppFile {
  ...
  TypeFile?: TypeFile;
}

export class AppFile implements IAppFile{
  constructor(
    ...
    public TypeFile?: TypeFile
  ) {}
}

Answer 3

Tadhg McDonald-Jensen 的回答很有用，但有一点需要说一下。将如下配置项直接写入.eslintrc会报错：

{
  // note you must disable the base rule as it can report incorrect errors
  "no-shadow": "off",
  "@typescript-eslint/no-shadow": ["error"]
}

这是一个正确的无阴影规则示例：

{
  "rules": {
      "no-shadow": "off",
      "@typescript-eslint/no-shadow": ["error"]
  },
}

Answer 4

似乎将此添加到基本“规则”还不够，我不得不在覆盖下再次添加它

# eslintrc.js
{
  "rules": { // Did not work here as intended
    "@typescript-eslint/dot-notation": "error",
    "no-shadow": "off",
  },
  "overrides": [
    {
      "files": [
          "*.ts"
      ],
      ...
      "rules": { // Here it worked
          "@typescript-eslint/dot-notation": "error",
          "no-shadow": "off",
      }
  ]
}

Answer 5

我对 TypeScript 中的以下代码有类似的问题：

export enum MyEnum {
  myValueOne = 'myValue',
  myValueTwo = 'myValueTwo', // <-- got "already declared in the upper scope” error
}

export class myValueTwo {
   constructor(){}
}

很遗憾，rules 或 overrides 都没有解决问题

 {
   "rules": {
      "no-shadow": "off",
      "@typescript-eslint/no-shadow": ["error"]
   },
   "overrides": {
      "no-shadow": "off",
      "@typescript-eslint/no-shadow": ["error"]
   },
}

在花了几个小时检查不同的问题、问题和文档后，我遇到了@typescript-eslint/no-shadow 的官方文档。 Here is the link

我要做的是在 eslint 中为 @typescript-eslint/no-shadow 添加额外的 ignoreTypeValueShadow 选项。

我的无阴影最终设置如下所示：

{
  "overrides": {
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error", , { "ignoreTypeValueShadow": true }]
  },
}

Answer 6

我设法使用以下配置阻止了错误的出现：

{
   "rules": {
      "no-shadow": "off",
      "@typescript-eslint/no-shadow": ["off"]
   }
}

在这两种情况下都使用“off”，因为我注意到在我阅读的所有示例中都有一个重复的模式，第一个使用“off”，第二个使用“error”。这让我怀疑这是不是正确的做法，但我无法以另一种方式避免这些错误，甚至没有使用覆盖。