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

如何解决EsLint 无法识别我的 Web Components 扩展 HTMLElement 接口

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

“'HTMLMiIconElement' 未定义”

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

当手动导入到使用它的 typeScript 文件时，一切似乎都可以工作，但我从以前的项目中知道它应该没有必要。

我认为我在监督某事，希望得到任何帮助！ :)

my-component-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","googlemaps"
    ]
  },"files": [
    "main.ts","polyfills.ts"
  ],"include": [
    "src/**/*.d.ts"
  ]
}

解决方法

询问 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