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

Posted 2023-03-07

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

【英文标题】：Eslint says all enums in Typescript app are "already declared in the upper scope"

【发布时间】：2021-01-05 18:00:03

【问题描述】：

开始一个新的应用程序，我安装了 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
      
    ]
  

【问题讨论】：

这是引发错误的基本规则，禁用no-shadow 并启用@typescript-eslint/no-shadow。请参阅this 及其后续链接。

如果@typescript-eslint/no-shadow 也给您带来问题，那么您可能使用的是过时的版本，如果出现这种情况，请参阅this。

【参考方案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 显示许多人在问同样的问题。

【讨论】：

遇到这种情况的人可以告诉我您使用的是什么配置吗？如果有一个常用的公共配置滥用了这个规则，我想让他们知道。

当你使用 CLI 将 Angular 从 tslint 升级到 eslint 时，我使用默认配置

确认这适用于 Angular 11 中由 TSLint-to-ESLint 工具自动生成的 .eslintrc.json。您必须将上面跳过 和 的行添加到 overrides.rules[0] （数组中的第一项）。我会在这里发布完整的配置，但它会在评论中搞砸。如果这个解释不够清楚，我可以创建一个 GitHub gist。

@TadhgMcDonald-Jensen：这是产生问题配置的步骤，可通过您上面指定的行修复：github.com/angular-eslint/…

可以确认，angular-eslint，从tslint到eslint的转换，包含这个问题。

【参考方案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
  ) 

【参考方案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"]
  ,

【参考方案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",
      
  ]

【参考方案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 ]
  ,

【参考方案6】：

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

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

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