如何检测TypeScript类型成员缺失并触发lint/构建错误？

1. 开启Vite构建阶段的TypeScript类型检查 #

Vite默认不会强制在构建时执行完整TypeScript类型校验，需手动开启该配置，这样访问不存在的类型成员会直接终止构建并抛出错误：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  typescript: {
    check: true // 启用构建时的TS类型检查
  }
})

2. 配置ESLint启用类型感知规则 #

你的现有ESLint配置已引入@typescript-eslint/recommended，但需添加类型信息关联，才能启用精准的成员访问检测规则：

• 更新ESLint配置，加入parserOptions.project关联你的tsconfig.json，同时启用@typescript-eslint/no-unsafe-member-access规则：

module.exports = {
    root: true,
    env: { browser: true, es2020: true },
    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
    ignorePatterns: ['dist', '.eslintrc.cjs'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: ['./tsconfig.json'], // 让ESLint获取TS类型信息
        tsconfigRootDir: __dirname
    },
    plugins: ['react-refresh'],
    rules: {
        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
        '@typescript-eslint/no-explicit-any': 'warn',
        '@typescript-eslint/no-unsafe-member-access': 'error' // 检测不安全的成员访问（包括不存在的成员）
    }
}

配置完成后，访问不存在的枚举成员会直接在控制台抛出ESLint错误，无需手动打开文件排查。

3. 配合SonarCloud扫描强化检测 #

SonarCloud自带TypeScript未定义成员检测规则（如typescript:S2389），只需确保项目的sonar-project.properties中正确启用TypeScript分析，代码扫描时会自动标记这类问题。

验证示例代码 #

注意修正枚举语法错误（TS枚举使用=而非:），配置生效后，以下代码会触发双重错误：

export enum ExampleItem {
   Item1 = 'Item 1',
   Item2 = 'Item 2'
}

const item3 = ExampleItem.Item3; // ESLint报no-unsafe-member-access错误，Vite构建抛出TS类型错误

内容的提问来源于stack exchange，提问作者D. Messier