Angular 埃斯林特元'；无法识别我的Web组件扩展HTMLElement接口

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

“'HTMLMiIconElement'未定义”

这是我的web组件的扩展HtmleElement接口

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

我想我会监督一些事情，并感谢任何帮助！：）

我的组件文件.ts

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

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"],
        }
    ]
};

.eslintrc.js

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

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"
    ]
  }
}

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

tsconfig.app.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"
    ]
  }
}

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

---

询问Stencil社区，强烈建议不要在TypeScript项目上使用

no undef

lint规则，因为TypeScript已经提供了此检查