为什么ESLint忽略我配置的strictNullChecks校验规则？

问题根因 #

默认配置下的@typescript-eslint仅做语法、代码风格校验，不会执行TypeScript的类型检查。你遇到的strictNullChecks是TypeScript编译器原生的校验规则，没有特殊配置的情况下ESLint不会上报这类类型错误。

验证tsconfig本身有效性 #

首先先排除tsconfig配置错误的问题，直接运行TS编译器校验你的测试文件：

npx tsc --noEmit ./src/components/MyComponent.tsx

如果运行后出现Type 'null' is not assignable to type 'number'的错误，说明你的tsconfig里strictNullChecks已经正常生效，问题出在ESLint的配置。

配置ESLint支持类型校验 #

要让ESLint上报类型相关错误，需要开启@typescript-eslint的类型感知校验能力，修改你的ESLint配置文件（.eslintrc.js/.eslintrc.json等）：

1. 给parserOptions添加tsconfig路径配置，告诉解析器需要读取TS配置做类型分析：

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."
  },
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    // 新增类型检查相关的扩展配置
    "plugin:@typescript-eslint/recommended-type-checked"
  ]
}

2. 配置完成后重新运行ESLint，就能看到对应null赋值的类型错误了。

常见配置失效排查点 #

• 检查tsconfig.json的include字段是否包含了你要校验的ts/tsx文件路径，如果测试文件不在include范围内，类型分析会失效
• 检查ESLint配置中是否有覆盖关闭了类型检查相关规则
• 多tsconfig的项目要确认parserOptions.project指向的是正确的、包含strictNullChecks配置的tsconfig文件

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