ESLint报'HeadersInit'未定义，TypeScript却可识别的原因？

出现ESLint与TypeScript识别矛盾的核心原因是ESLint未正确接入TypeScript类型系统，具体分为以下几点：

1. 未配置TypeScript专属ESLint解析器
   当前配置未指定@typescript-eslint/parser作为解析器，默认ESLint解析器无法识别TypeScript标准库中的类型，自然无法感知HeadersInit这类内置类型。

2. 缺少TypeScript ESLint规则集
   配置未扩展plugin:@typescript-eslint/recommended这类TS专属规则集，ESLint无法启用对TS类型的校验支持，也就无法从TS标准库读取类型定义。

3. 未关联TS配置文件
   ESLint需要通过TS配置文件（如tsconfig.json）获取项目的lib设置（HeadersInit属于DOM标准库类型），当前配置未在parserOptions中指定TS配置路径，导致ESLint无法读取这些关键信息。

修改你的.eslintrc配置，补充TypeScript ESLint相关配置项：

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "prettier",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    // 新增TS推荐规则集
    "plugin:@typescript-eslint/recommended"
  ],
  // 指定TS专属解析器
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    // 关联项目TS配置文件
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."
  },
  "plugins": ["react", "prettier", "@typescript-eslint"],
  "overrides": [
    {
      "files": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.tsx"],
      "env": {
        "jest": true
      }
    }
  ]
}

同时检查tsconfig.json的lib字段，确保包含DOM（HeadersInit属于DOM API类型）：

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"]
    // 其他配置项...
  }
}

修改配置后重启ESLint服务或重新执行lint命令，HeadersInit的未定义提示会消失。此时ESLint通过@typescript-eslint/parser和关联的TS配置，能和TS编译器同步读取标准库类型定义，解决识别矛盾。

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