Question

我几个月前使用create-react-app开始了一个反应项目，我很有兴趣将项目从Javascript迁移到Typescript。

我看到有一种方法可以使用标志创建使用typescript的反应应用程序：

--scripts-version=react-scripts-ts

但是我没有找到任何解释如何将现有的JS项目迁移到TS。我需要它以递增方式完成，这样我就可以使用.js和.ts文件，这样我就可以随着时间的推移进行转换。有没有人有这种迁移的经验？为使这项工作，应该采取哪些必要步骤？

Answer 1

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

运行命令create-react-app --scripts-version=react-scripts-ts，使用typescript创建临时反应项目（注意 - 需要全局安装create-react-app）
在您自己的项目中 - 在package.json文件下删除react-scripts
通过运行命令react-scripts-ts或者使用npm然后yarn add react-scripts-ts将npm install react-scripts-ts添加到项目中。或者，将"react-scripts-ts": "2.8.0"添加到package.json。
从您在步骤1中创建的项目中，将文件tsconfig.json, tsconfig.test.json tslint.json复制到您自己的项目
在您自己的项目中，在package.json下的“脚本”部分下，将react-scripts个实例更改为react-scripts-ts（应位于start，build，{{ 1}}和test
使用纱线或npm：eject，@types/node和@types/react安装以下模块，以安装反应的类型。如果使用package.json，请输入@types/react-dom部分。
将devDependencies文件名更改为index.js
在tsconfig.json文件中添加以下配置：index.tsx - for more info

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

现在你可以运行你的项目并且它可能有用，对于那些收到包含"allowSyntheticDefaultImports": true关于.js文件的错误的人来说，它发生是因为babel不知道如何加载.js文件来自.tsx文件。我们需要做的是更改项目配置。我在不运行You may need an appropriate loader to handle this file type的情况下发现这样做的方法是使用react-app-rewired包。此程序包允许您配置将添加/覆盖默认项目设置的外部配置。我们要做的是使用babel加载这些类型的文件。让我们继续前进：

使用yarn或npm

eject

在根文件夹中（react-app-rewired所在的位置）创建名为package.json的新文件
将此代码放入config-overrides.js文件中：
```
config-overrides
```

编辑package.json，以便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 }，start/start-js，build和test脚本使用react-app-rewired，如project readme所示。例如。 eject。

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

希望有所帮助

正如评论中所建议的那样，您可以在tsconfig.json文件中定义："test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom"，这样您就可以在没有react-app-rewired的情况下混合使用JS和TS。谢谢你提到这个！

更新： create-react-app版本2.1.0支持typescript，所以对于那些从头开始的人，你可以使用它来创建带有typescript的新应用程序，并根据{{ 3}}应该使用以下命令完成：

"compilerOptions": { "allowJs": true}

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

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

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

Answer 2

立即创建React App v2.1.0 was released today with TypeScript support。这意味着您不再需要弹出或使用react-scripts-ts分支； all you need to do（如果您已有一个Create React App项目），请安装所需的软件包：

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ # or
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后您可以简单地将.js文件重命名为.ts文件以开始使用TypeScript。

（如果您有一个使用create-react-app-typescript分支的现有应用，那么这里是how to port it to regular Create React App上的教程。）

Answer 3

您需要弹出配置才能执行此操作。

弹出后，您需要执行以下步骤：

将打字稿扩展名tsx和ts添加到extensions表格在webpack configs（dev和prod）。

添加ts-loader。这是一个例子

{
  test: /\.(ts|tsx)$/,
  include: paths.appSrc,
  use: [
    {
      loader: require.resolve('ts-loader'),
    },
  ],
},

将eslint更改为tslint

添加source-map-loader以获得调试Typescript文件的可能性。

{
  test: /\.js$/,
  loader: require.resolve('source-map-loader'),
  enforce: 'pre',
  include: paths.appSrc,
}

创建一个Typescript配置文件，并记住将allowJs设置为真。

Answer 4

1）。运行

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

或

yarn add typescript @types/node @types/react @types/react-dom @types/jest

2）。将任何文件重命名为TypeScript文件（例如，将src / index.js更改为src / index.tsx）

3）。运行npm i @types/react-dom @types/react-redux @types/react-router-dom

4）。重新启动开发服务器！

享受：）

将create-react-app从javascript迁移到typescript

4 个答案: