Typescript版本与react-scripts、ts-loader版本兼容问题求助

方案1：降级ts-loader适配react-scripts支持的TypeScript版本 #

react-scripts 5.0.1对TypeScript的peerDependencies限制为≤3.9.2，而ts-loader的8.x版本系列完全兼容TypeScript 3.6~3.9，这是最稳妥的适配方式：

• 卸载当前不兼容的依赖：

npm uninstall ts-loader typescript

• 安装匹配版本：

npm install --save-dev typescript@3.9.2 ts-loader@8.4.0

• 验证tsconfig.json：确保compilerOptions中未使用TypeScript 3.9.2之后新增的语法特性，避免编译报错。

方案2：用react-app-rewired扩展配置，使用新版TypeScript #

如果必须使用高版本TypeScript，可以通过react-app-rewired绕过react-scripts的版本限制，自定义webpack配置适配ts-loader：

1. 安装依赖：

npm install --save-dev react-app-rewired ts-loader@latest typescript@latest

2. 在项目根目录创建config-overrides.js，替换默认TS loader并关闭版本检查：

module.exports = function override(config, env) {
  // 替换react-scripts默认的TS处理逻辑为ts-loader
  const tsRule = config.module.rules.find(rule => rule.test.toString() === /\.(ts|tsx)$/.toString());
  if (tsRule) {
    tsRule.use = [
      {
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          configFile: 'tsconfig.json'
        }
      }
    ];
  }
  // 移除react-scripts内置的TS版本检查插件
  config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin');
  return config;
};

3. 修改package.json中的脚本命令，替换为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

注意：此方案会丢失react-scripts内置的类型检查能力，建议在脚本中添加tsc --noEmit命令补充类型校验。

方案3：eject react-scripts完全自定义配置 #

若上述方案无法满足需求，可选择eject解除react-scripts的配置锁，完全自主控制webpack配置：

1. 执行eject命令（不可逆操作，执行后无法恢复为默认react-scripts管理模式）：

npm run eject

2. 在生成的config/webpack.config.js中，找到TS相关规则，替换为ts-loader配置：

{
  test: /\.(ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('ts-loader'),
  options: {
    configFile: paths.appTsConfig,
  },
}

3. 安装最新版依赖：

npm install --save-dev typescript@latest ts-loader@latest

此方案的优势是完全自主掌控配置，但需自行维护webpack配置，无法享受react-scripts的后续更新支持。

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