将create-react-app从javascript迁移到打字稿

Question

几个月前，我使用create-react-app启动了一个react项目，我对将项目从Javascript迁移到Typescript很感兴趣。

我看到有一种使用typescript使用标志创建react应用的方法：

--scripts-version=react-scripts-ts

但是我没有找到任何解释如何将现有的JS项目迁移到TS。我需要逐步完成它，以便可以同时使用.js和.ts文件，以便可以随时间进行转换。有人对这次迁移有任何经验吗？要执行此工作应采取哪些必要步骤？

Answer 1

我找到了一种将create-react-app从javascript迁移到打字稿的解决方案，这种方式 不需要 弹出。

1. 通过运行命令使用打字稿创建一个临时react项目create-react-app --scripts-version=react-scripts-ts （注意-需要create-react-app全局安装）
2. 在您自己的项目中-在package.json文件下删除react-scripts
3. react-scripts-ts通过运行命令添加到您的项目，yarn add react-scripts-ts或者如果您正在使用npm，则添加npm install react-scripts-ts。或者，添加"react-scripts-ts": "2.8.0"到package.json。
4. 从您在步骤1中创建的项目中，将文件：复制tsconfig.json, tsconfig.test.json tslint.json到您自己的项目中
5. 在自己的项目中package.json，根据脚本部分，将react-scripts实例react-scripts-ts（应该是下start，build，test和eject
6. 安装分型为通过安装使用纱或NPM以下模块反应：@types/node，@types/react和@types/react-dom。devDependencies如果使用package.json，请放在部分中。
7. 将index.js文件名更改为index.tsx
8. 在您的tsconfig.json文件中，添加以下配置："allowSyntheticDefaultImports": true- 有关更多信息

注意 步骤7可能需要进行其他修改，具体取决于index.js文件中的内容（如果它取决于项目中的JS模块）。

现在，您可以运行您的项目，它可能会工作，对于那些遇到You may need an appropriate loader to handle this file type有关.js文件错误的人来说，它发生是因为babel不知道如何从.tsx文件中加载.js文件。我们需要做的是更改项目配置。我发现不运行eject就可以使用react-
app-rewired
包。该软件包可让您配置外部配置，该配置将被添加/覆盖默认项目设置。我们将使用babel加载这些类型的文件。让我们继续：

1. react-app-rewired使用yarn或npm 安装软件包
2. 在您的根文件夹（package.json位于其中）中创建一个新文件，名称为config-overrides.js
3. 将此代码放在config-overrides文件中：

        var paths = require('react-scripts-ts/config/paths')

    module.exports = function override(config) {
      config.module.rules.push({
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
            babelrc: false,
            presets: [require.resolve('babel-preset-react-app')],
            cacheDirectory: true,
        },
      })

      return config
    }

编辑的package.json所以start/start-js，build，test，和eject脚本使用反应-APP-
重新接线如图所示项目自述。例如"test": "react-app-rewired test --scripts-version react-scripts- ts --env=jsdom"。

现在您可以启动项目，并且应该解决问题。您可能需要根据项目（其他类型等）进行其他修改。

希望能帮助到你

如注释中的建议，可以定义："compilerOptions": { "allowJs": true}在tsconfig.json文件中，因此您可以混合JS和TS，而无需react-app-rewired。谢谢提这个！

更新： create-react-app版本2.1.0支持打字稿，因此对于那些从头开始的人来说，您可以使用它来创建带有打字稿的新应用程序，并且根据文档，应使用以下命令来完成：

$ npx create-react-app my-app --typescript

对于现有项目，在更新到版本2.1.0之后，使用以下命令将以下软件包添加到项目的依赖项中：

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

然后您可以简单地将.js重命名为.ts文件。