将create-react-app从javascript迁移到打字稿 [英] Migrating create-react-app from javascript to typescript

问题描述

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

I started a react project using create-react-app few months ago and I'm interesting in migrating the project from Javascript to Typescript.

我看到那里是一种使用标志创建带有打字稿的应用程序的方法：

I saw that there is a way to create react app with typescript using the flag:

--scripts-version=react-scripts-ts

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

But I didn't find any explanation how can I migrate an existing JS project to TS. I need it to be done incrementally so I can work with both .js and .ts files so I can do the transformation over time. Does anyone has any experience with this migration? What are the required steps that should be done to make this work?

推荐答案

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

I found a solution to migrate create-react-app from javascript to typescript, this way doesn't require eject.

1. 用打字稿创建临时反应项目，方法是运行命令 create-react-app --scripts-version = react-scripts-ts
   （注意-需要 create-react-应用程序进行全局安装）


2. 在您自己的项目中-在 package.json 文件下，删除反应脚本


3. 通过运行将反应脚本-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. 通过使用yarn或npm安装以下模块来安装react类型。 @ types / node ， @ types / react 和 @ types / react-dom 。如果使用package.json，则放入 devDependencies 部分。


7. 更改 index.js 文件名设置为 index.tsx


8. 在tsconfig.json文件中添加以下配置： allowSyntheticDefaultImports：真-更多信息

1. Create a temporary react project with typescript by running the command create-react-app --scripts-version=react-scripts-ts (Note - requires create-react-app to be installed globally)
2. In your own project - under package.json file remove the react-scripts
3. Add react-scripts-ts to your project by running the command yarn add react-scripts-ts or if your are using npm then npm install react-scripts-ts. Or, add "react-scripts-ts": "2.8.0" to package.json.
4. From the project you created in step 1 copy the files: tsconfig.json, tsconfig.test.json tslint.json to your own project
5. Under your own project, in package.json, under scripts section, change react-scripts instances to react-scripts-ts (should be under start, build, test and eject
6. Install the typings for react by installing the following modules using yarn or npm: @types/node, @types/react and @types/react-dom. Put in devDependencies section if using package.json.
7. Change index.js file name to index.tsx
8. In your tsconfig.json file add the following configuration: "allowSyntheticDefaultImports": true - for more info

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

NOTE step 7 might require additional modification depends on what you have in your index.js file (if it depends on JS modules in the project).

现在，您可以运行项目并对于可能收到错误且包含的错误的人来说，您可能需要一个适当的加载器来处理有关.js文件的此文件类型，原因是babel不会知道如何从.tsx文件加载.js文件。我们需要做的是更改项目配置。我发现没有运行弹出的方式是使用 react-app-rewired 软件包。该软件包可让您配置外部配置，该配置将被添加/覆盖默认项目设置。我们将使用babel加载这些类型的文件。让我们继续：

Now you can run your project and it might work, for those of you who are getting error that contains You may need an appropriate loader to handle this file type regarding .js files, it happens because babel doesn't know how to load .js file from .tsx files. What we need to do is to change the project configuration. The way I found doing it without running eject is using react-app-rewired package. This package lets you configure external configuration which will be added/override the default project settings. What we'll do is using babel to load these type of files. Let's moved on:

1. 使用yarn或安装软件包 react-app-rewired npm


2. 在您的根文件夹（ package.json 所在的位置）中，创建一个名称为的新文件config-overrides.js



3. 将此代码放在 config-overrides 文件中：

1. Install the package react-app-rewired using yarn or npm
2. In your root folder (where package.json is located) create a new file with the name config-overrides.js

3. Put this code in config-overrides file:

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 ，构建，测试和弹出脚本使用反应堆如项目自述文件所示，进行t-app-rewired 。例如。 test：反应应用程序重新连接的测试--scripts-version react-scripts-ts --env = jsdom 。

Edit package.json so the start/start-js, build, test, and eject scripts use react-app-rewired as shown in the project readme. E.g. "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".

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

Now you can start you the project and the problem should be solved. You might need additional modifications depending on your project (additional types and so).

希望它会有所帮助

在注释中建议的地方，可以在tsconfig.json文件中定义 compilerOptions：{ allowJs：true} ，因此可以在不使用JS和TS的情况下混合使用React-app-rewired。

As suggested here in the comments, it's possible to define: "compilerOptions": { "allowJs": true} in your tsconfig.json file, so you can mix JS and TS without react-app-rewired. Thanks for mention this!

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

UPDATE: create-react-app version 2.1.0 support typescript so for those of you who are starting from scratch you can use it to create new application with typescript, and according to the documentation it should be done with the following command:

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

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

For existing projects, after updating to version 2.1.0, add the following packages to your project's dependencies with the following command:

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

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

and then you can simply rename .js to .ts files.

这篇关于将create-react-app从javascript迁移到打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！