如何在React TypeScript项目中使用ttypescript集成自定义TypeScript转换器？

我来帮你一步步搞定在React TypeScript项目里用ttypescript和自定义运行时类型检查转换器的问题，毕竟react-scripts默认没直接支持替换TypeScript编译器，得做些配置调整：

首先得把ttypescript、用来覆盖react-scripts配置的工具（推荐react-app-rewired，不用eject就能改配置），还有你的自定义转换器都装上：

npm install --save-dev ttypescript react-app-rewired
# 别忘了装你的自定义转换器，比如假设它叫`runtime-type-checker`
npm install --save-dev runtime-type-checker

在项目根目录的tsconfig.json里，给compilerOptions加个plugins数组，指定你的转换器：

{
  "compilerOptions": {
    // 保留你原来的所有配置，比如target、module、jsx这些...
    "plugins": [
      { "transform": "runtime-type-checker" } // 替换成你实际的转换器包名
    ]
  },
  "include": ["src/**/*"]
}

在项目根目录新建config-overrides.js，这个文件会告诉react-app-rewired用ttypescript替代默认的tsc：

const { getLoader } = require('react-app-rewired');

module.exports = function override(config, env) {
  // 找到处理.ts/.tsx文件的ts-loader
  const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.test && rule.test.toString().includes('tsx') &&
      rule.use && rule.use.some(loader => loader.loader?.includes('ts-loader'))
  );

  if (tsLoader) {
    // 给ts-loader指定用ttypescript作为编译器
    tsLoader.use.forEach(loader => {
      if (loader.loader.includes('ts-loader')) {
        loader.options.compiler = 'ttypescript';
      }
    });
  }

  return config;
};

把原来的react-scripts命令换成react-app-rewired，这样启动项目时就会用我们配置好的ttsc了：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject" // eject命令保留原样就行
  }
}

运行npm start启动项目，检查你的运行时类型检查器是否正常工作——比如可以写个带类型注解的组件，看看转换器有没有生成对应的检查代码。

注意：如果你的React项目用的是babel来处理TypeScript（新版create-react-app可能默认用babel），那上面的ts-loader配置可能不生效，这时候你需要调整babel配置，让它配合ttypescript，不过这种情况相对少，大部分用ts-loader的场景上面的步骤都能搞定。

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