EsLint 无法识别我的 Web 组件扩展 HTMLElement 接口

Question

我用 StencilJS 构建了一堆 Web 组件并将它们发布到 NPM。接下来，我确实在我的 Angular 11 应用程序中安装了 NPM 包，并遵循了 Stencils Angular 框架集成指南。自定义元素工作正常，但是当我定义类型并在我的 esLint 规则集中设置“no-undef”时，我从 esLint 收到以下错误：

"'HTMLMiIconElement' 未定义"

这是我的网络组件的扩展 HTMLElement 接口。

当手动导入到使用它的 typeScript 文件时，一切似乎都能正常工作，但我从以前的项目中知道这不是必需的。

我想我正在监督一些事情，如果有任何帮助，我将不胜感激！ :)

我的组件-file.ts

const miIconElement: HTMLMiIconElement = document.createElement('mi-icon');

.eslintrc.js

module.exports = {
    "root": true,
    'overrides': [
        {
            "files": ["*.ts"],
            'parser': '@typescript-eslint/parser',
            'env': {
                'browser': true,
                'es6': true,
                'jest': true
            },
            'globals': {
                'google': 'readonly'
            },
            'parserOptions': {
                ecmaVersion: 2020,  // Allows for the parsing of modern ECMAScript features
                sourceType: 'module'  // Allows for the use of imports
            },
            'rules': {
                'no-undef': 2,
            }
        },
        {
            "files": ["*.html"],
            "parser": "@angular-eslint/template-parser",
            "plugins": ["@angular-eslint/template"],
        }
    ]
};

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2020",
      "dom"
    ],
    "types": [
      "node",
      "jest",
      "googlemaps"
    ]
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "node",
      "googlemaps"
    ]
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Answer 1

询问 Stencil 社区后发现，强烈建议不要在 TypeScript 项目上使用 no-undef lint 规则，因为 TypeScript 已经提供了此检查。

https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors

EsLint 无法识别我的 Web 组件扩展 HTMLElement 接口

EsLint won't recognise my Web Components extended HTMLElement interfaces

typescript

eslint

angular

stenciljs