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

Posted 2023-02-22

【中文标题】将 create-react-app 从 javascript 迁移到 typescript

【英文标题】：Migrating create-react-app from javascript to typescript

【发布时间】：2018-05-10 13:14:44

【问题描述】：

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

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

--scripts-version=react-scripts-ts

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

【参考方案1】：

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

$ 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 文件。

---

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

通过运行命令create-react-app --scripts-version=react-scripts-ts 使用 typescript 创建一个临时反应项目 （注意 - 需要全局安装 create-react-app） 在您自己的项目中 - 在 package.json 文件下删除 react-scripts 通过运行命令yarn add react-scripts-ts 将react-scripts-ts 添加到您的项目中，或者如果您使用的是npm，则添加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、test 和eject 下 通过使用 yarn 或 npm 安装以下模块来安装 react 的类型：@types/node、@types/react 和 @types/react-dom。如果使用 package.json，请放入 devDependencies 部分。 将index.js文件名更改为index.tsx 在您的 tsconfig.json 文件中添加以下配置："allowSyntheticDefaultImports": true - for more info

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

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

使用yarn或npm安装包react-app-rewired

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

将此代码放入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 脚本使用 react-app-rewired，如 project readme 所示。例如。 "test": "react-app-rewired test --scripts-version react-scripts-ts --env=jsdom".

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

希望对你有帮助

按照 cmets 中的建议，可以在 tsconfig.json 文件中定义："compilerOptions": "allowJs": true，这样您就可以在没有 react-app-rewired 的情况下混合 JS 和 TS。感谢您提及这一点！

【讨论】：

我认为第 1 节中的命令应为：create-react-app --scripts-version=react-scripts-ts（当前答案缺少“s”）。我会编辑帖子，但显然我必须更改 6 个或更多字符，而且我不想干涉。

对于 8. 你可以添加 "allowSyntheticDefaultImports": true 到 tsconfig.json

@galvan 请接受我更新两件事的建议：如上所述，"allowSyntheticDefaultImports": true 不再需要第 8 步，也可以定义："compilerOptions": "allowJs": true,，以便您可以将 JS 交织在一起和没有 react-app-rewired 部分的 TS :) 除此之外，这是很棒的教程 :)

第 5 步：我的应用已经实现了 react-app-rewired。所以我不得不改变这样的行：从"start": "react-app-rewired start",到"start": "react-app-rewired start --scripts-version react-scripts-ts",

第 4 步：为避免 'npm run build' 出错，同时复制 tsconfig.prod.json

【参考方案2】：

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)。重启你的开发服务器！

享受:)

【参考方案3】：

今天创建 React 应用程序v2.1.0 was released today with TypeScript support。这意味着您不再需要弹出或使用react-scripts-ts fork； 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 fork 的现有应用程序，这里有一个关于 how to port it to regular Create React App 的教程。）

【讨论】：

这应该是要走的路。感谢@Vincent！

我想知道他们为什么不使用 babel 配置。它几乎是瞬间的。

@SILENT 我不确定你的意思。当您在 CRA 中使用 TypeScript 时，它仍然使用 Babel 进行转译。 TypeScript 只做类型检查。

@Vincent 据我所知，他们没有使用 babel 7 的插件 preset-typescript - iamturns.com/typescript-babel

@ArturCarvalho CRA 不使用 --save-dev，因为区别主要与 Node 库相关：devDependencies 不应由库安装，具体取决于您的包，但其他库不安装通常依赖于 CRA 应用程序。因此，我也使用了--save，以保持与 CRA 文档的一致性。

【参考方案4】：

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

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

将打字稿扩展tsx 和ts 添加到extensions 表 在 webpack 配置（开发和产品）中。

添加 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 设置为 是的。

【讨论】：

感谢您的回答，我不确定，但我认为目前 webpack 是由 react-scripts 管理的，因为我的项目中没有 webpack 配置。当我弹出时，我会有 webpack 配置文件吗？

是的，这就是您需要执行弹出的原因。如果可以等。下一个 Babel 版本将支持 Typescript 开箱即用，并且可能无需弹出即可迁移。不幸的是，Babel v7 没有发布日期 :( 但有可用的 beta 版本

我在处理现有代码库时使用了这种方法。我想补充一点，配置文件和代码的其他区域需要更改引用以指向 .ts/tsx 文件以及一些包是不同的。我解决这个问题的方法是使用 --scripts-version=react-script-ts 标志创建一个新应用程序，然后比较其中的文件。