如何配置tsconfig使TypeScript错误不中断create-react-app的JS执行

仅通过修改tsconfig无法完全实现你的需求，create-react-app（下称CRA）内置的编译流程默认会在检测到TypeScript错误时直接阻断页面渲染，需要配合tsconfig调整+环境变量配置才能实现仅控制台报错、不影响UI运行的效果。

1. 调整tsconfig.json配置 #

修改项目根目录下的tsconfig.json，修改/新增以下编译选项：

{
  "compilerOptions": {
    // 关闭编译出错时停止生成输出文件的逻辑
    "noEmitOnError": false,
    // 允许TS生成编译后的JS文件，原有CRA默认配置是noEmit: true，需要改成false
    "noEmit": false,
    // 其余原有配置保持不变即可
  }
}

这一步的作用是让TypeScript编译器本身遇到语法/类型错误时，依然生成可用的JS代码，不会直接中断编译输出。

2. 配置CRA环境变量关闭错误阻断 #

CRA官方提供了专用环境变量控制TS错误的阻断逻辑：

• 如果你使用Mac/Linux系统，直接修改package.json中的启动脚本：

{
  "scripts": {
    "start": "TSC_COMPILE_ON_ERROR=true react-scripts start"
  }
}

• 如果你使用Windows系统，需要先安装cross-env处理跨平台环境变量：
  先执行安装命令：npm i cross-env -D
  再修改启动脚本：

{
  "scripts": {
    "start": "cross-env TSC_COMPILE_ON_ERROR=true react-scripts start"
  }
}

配置完成后重启开发服务，后续遇到TS错误只会在终端、浏览器控制台打印警告信息，不会弹出全局错误页阻断UI运行。

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