解决ESLint检测TypeScript DOM类型时的no-undef错误

原因 #

ESLint原生的no-undef规则无法识别TypeScript DOM库提供的全局接口类型，导致误报未定义。

解决步骤 #

1. 确保TypeScript配置包含DOM库 #

打开项目根目录的tsconfig.json，检查compilerOptions.lib数组是否包含"DOM"——这两个接口是DOM库提供的内置类型，必须引入才能被TypeScript识别：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"] // 确保包含"DOM"项
  }
}

2. 替换ESLint的原生no-undef规则 #

使用@typescript-eslint插件提供的no-undef规则替代ESLint原生规则，它能正确识别TypeScript的全局类型。修改.eslintrc.json：

{
  "rules": {
    "no-undef": "off", // 关闭原生规则
    "@typescript-eslint/no-undef": "error" // 启用适配TS的规则
  }
}

3. （可选）直接声明全局变量 #

如果不想替换规则，也可以在ESLint配置里直接声明这两个变量为只读全局变量：

{
  "globals": {
    "WindowEventMap": "readonly",
    "HTMLElementEventMap": "readonly"
  }
}

4. 确保ESLint正确集成TypeScript #

检查ESLint配置是否正确使用TypeScript解析器和插件，确保已安装@typescript-eslint/parser和@typescript-eslint/eslint-plugin依赖，并在.eslintrc.json中配置：

{
  "parser": "@typescript-eslint/parser",
  "extends": ["plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"]
}

内容的提问来源于stack exchange，提问作者Axel