react-scripts start为何忽略TypeScript错误？如何实现带错编译？

一、react-scripts 为何能忽略TS错误继续运行 #

Create React App 的react-scripts start在开发模式下，是通过fork-ts-checker-webpack-plugin实现类型检查与编译分离的：Webpack会正常把TS转译成JS输出到浏览器，而TypeScript的类型错误只会被当成警告展示在页面或控制台，不会阻断编译流程。

而直接执行tsc --build时，TS编译器默认会在检测到错误时终止编译，不会生成目标JS文件，这就是两者行为差异的核心原因。

二、临时实现带错编译的几种方案 #

方案1：修改tsconfig.json配置 #

在项目根目录的tsconfig.json中调整编译选项，让TS编译器即使遇到错误也生成JS：

{
  "compilerOptions": {
    "noEmitOnError": false, // 关键配置：关闭"有错误则不输出"的默认规则
    "skipLibCheck": true, // 可选：跳过第三方依赖的类型检查，减少无关报错
    // 若之前开启了严格模式，可临时关闭（或单独禁用特定严格规则）
    "strict": false
  }
}

修改后执行yarn run tsc --build，编译器会输出错误信息，但依然会生成完整的JS文件。

方案2：命令行直接传参覆盖配置 #

不想改动tsconfig的话，直接给tsc命令加参数即可临时生效：

yarn run tsc --build --noEmitOnError false

这个参数和tsconfig里的noEmitOnError作用完全一致，适合单次临时编译场景。

方案3：复用react-scripts的build流程 #

如果想和开发模式的行为完全对齐，直接把build脚本换成react-scripts build：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

它会像开发模式一样忽略TS错误完成生产构建，同时将错误以警告形式输出。需要注意：生产构建后的代码依然可正常运行，但类型不安全，后续必须修复错误。

方案4：完全跳过类型检查（快速编译） #

如果只是想最快完成编译，可使用--transpileOnly参数完全跳过类型检查：

yarn run tsc --build --transpileOnly

这个方式编译速度极快，但会完全忽略所有类型问题，风险较高，仅适合极端紧急的临时场景。

三、重要提醒 #

以上均为临时妥协方案，项目进入稳定迭代阶段后，务必逐一修复所有TypeScript错误，保障代码的类型安全性和可维护性。

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