JS版create-react-app项目编译TypeScript及引入TS模块无需eject方案

嘿，我来帮你搞定这个问题！在Create React App（CRA）里给JS项目加上TypeScript支持，同时引入TS编写的第三方模块还不用eject，完全可行，下面是一步步的具体方法：

一、让现有JS React项目支持TypeScript编译 #

CRA本身就内置了TypeScript支持，不需要eject就能开启，只需要几步配置：

• 安装TypeScript及类型依赖
  打开终端，在项目根目录运行：

  npm install --save-dev typescript @types/react @types/react-dom
  # 如果你用yarn的话：
  yarn add --dev typescript @types/react @types/react-dom
  

  这些依赖包括TypeScript编译器本身，以及React和React DOM的类型定义文件。

• 添加tsconfig.json配置文件
  你可以手动在项目根目录创建tsconfig.json，或者运行npx tsc --init生成基础配置后，调整为CRA兼容的设置：

  {
    "compilerOptions": {
      "target": "ESNext",
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true, // 允许JS和TS文件共存，方便逐步迁移
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true, // 开启严格类型检查，可选但推荐
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true, // 由CRA的webpack负责编译，不需要TS自己输出文件
      "jsx": "react-jsx"
    },
    "include": ["src"]
  }
  

• 开始使用TypeScript
  现在你可以直接新建.ts或.tsx文件（组件文件建议用.tsx），或者逐步把现有的.js/.jsx文件重命名为.tsx（重命名后可能需要修复一些类型错误）。启动项目时，CRA会自动编译TS/TSX文件，完全不用额外配置。

二、引入未编译的TypeScript第三方模块（无需eject） #

如果你的第三方模块已经编译成JS并发布到npm（大部分TS模块都会这么做），那直接import就行，CRA会自动处理。但如果模块是未编译的TS源码（比如你自己开发的本地模块，或者某些未转译的开源模块），就需要修改webpack配置，但不用eject，我们可以用react-app-rewired和customize-cra来实现：

• 安装依赖
  先安装这两个工具：

  npm install --save-dev react-app-rewired customize-cra
  # yarn的话：
  yarn add --dev react-app-rewired customize-cra
  

• 修改package.json的脚本命令
  把原来的start、build、test命令替换成用react-app-rewired执行：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject" // eject命令保留不变，不过我们不用它
  }
  

• 创建webpack配置覆盖文件
  在项目根目录新建config-overrides.js，添加以下配置来让webpack处理第三方TS模块：

  const { override, addWebpackModuleRule } = require('customize-cra');
  const path = require('path');
  
  module.exports = override(
    // 添加规则，让webpack编译指定的第三方TS模块
    addWebpackModuleRule({
      test: /\.(ts|tsx)$/,
      // 这里要包含你的项目源码目录，以及第三方模块的路径
      include: [
        path.resolve(__dirname, 'src'),
        // 替换成你的TS第三方模块路径，比如node_modules/my-ts-library
        path.resolve(__dirname, 'node_modules/my-ts-library')
      ],
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-react',
            '@babel/preset-typescript',
            ['@babel/preset-env', { targets: 'last 2 versions' }]
          ]
        }
      }
    })
  );
  

  这段配置告诉webpack：把指定的第三方TS模块加入编译范围，用Babel转译成浏览器能识别的JS。

• 验证配置
  现在你可以正常import这个TS模块了，启动项目或执行build，webpack会自动处理它的编译。

一些额外注意事项 #

• 如果第三方模块有自己的类型定义（比如包含.d.ts文件），确保你的tsconfig.json的include或typeRoots能识别到这些定义。
• 如果你开启了严格类型检查，可能需要修复模块引入时的类型错误，或者暂时调整strict选项为false（不推荐，但可以作为临时方案）。

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