如何让TypeScript错误在React+Webpack项目中触发致命错误

我当前使用React + TypeScript + Webpack开发项目，VS Code会正确提示TypeScript错误（如下示例），但代码仍能正常编译运行。我需要调整配置，让TypeScript错误成为致命错误：控制台抛出错误、浏览器显示编译失败，必须修复错误才能继续开发。

Expected 2 arguments, but got 1.ts(2554)
MobileDatePicker.tsx(14, 27): An argument for 'onAccept' was not provided.
const MyActionBar: ({ onCancel, className }: PickersActionBarProps, onAccept: Function) => JSX.Element
No quick fixes available

以下是针对现有配置的修改方案：

方案一：使用fork-ts-checker-webpack-plugin（推荐，不影响编译速度） #

这个插件会在单独进程中做类型检查，不阻塞编译流程，同时可以设置同步检查来阻断错误代码的运行。

1. 安装依赖

npm install fork-ts-checker-webpack-plugin --save-dev

2. 修改webpack.config.js

• 首先导入插件：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

• 修复webpack配置中的mode错误（原配置mode: env.file是错误的，应该使用传入的模式参数）：

// 替换原本的mode行
mode: arg.mode,

• 在plugins数组中添加插件配置：

new ForkTsCheckerWebpackPlugin({
  async: false, // 设为false，让类型检查同步执行，有错误则阻断编译
  eslint: {
    files: './src/**/*.{ts,tsx,js,jsx}' // 可选：同时检查ESLint错误，一并阻断
  }
})

方案二：替换babel-loader为ts-loader #

直接用ts-loader替代babel-loader，启用完整的类型检查，阻断错误代码的编译。

1. 安装依赖

npm install ts-loader --save-dev

2. 修改webpack.config.js中的TS/TSX规则
   替换原有的babel-loader规则：

{
  test: /\.(ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'ts-loader',
    options: {
      transpileOnly: false, // 关闭仅转译模式，启用类型检查
      compilerOptions: {
        noEmit: false // 覆盖tsconfig中的noEmit配置，ts-loader需要生成编译输出
      }
    }
  }
}

注意：如果保留js/jsx文件的babel-loader处理，可以把规则拆分为ts/tsx用ts-loader，js/jsx继续用babel-loader。

额外注意事项 #

• 你的tsconfig.json已经开启strict: true，这能保证最严格的类型检查，无需修改。
• 修改配置后，启动开发服务（如npm run start）时，只要存在TypeScript错误，webpack会直接编译失败，浏览器会显示错误页面，控制台输出详细错误信息，必须修复错误才能正常运行。

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