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

Question

几个月前我使用 create-react-app 开始了一个 React 项目，我很想将项目从 Javascript 迁移到 Typescript。

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

--scripts-version=react-scripts-ts

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

Answer 1

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

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

将打字稿扩展 tsx 和 ts 添加到 extensions table 在 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 设置为是的。

Answer 2

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

$ 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 迁移到打字稿的解决方案，这样 不需要 弹出。

通过运行命令 create-react-app --scripts-version=react-scripts-ts 使用打字稿创建一个临时的 React 项目（注意 - 需要 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 不知道如何从 .tsx 文件加载 .js 文件。我们需要做的是更改项目配置。我发现没有运行ning eject 的方法是使用 react-app-rewired 包。此包允许您配置外部配置，这将是 added/override 默认项目设置。我们要做的是使用 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".

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

希望对您有所帮助

正如评论中建议的那样，可以在你的 tsconfig.json 文件中定义："compilerOptions": { "allowJs": true}，这样你就可以混合使用 JS 和 TS 而无需 react-app-rewired。感谢您提及这一点！

Answer 3

创建 React App v2.1.0 was released today with TypeScript support today. That means you no longer need to eject or use the 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 分支的现有应用程序，这里有一个关于 how to port it to regular Create React App 的教程。）

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

Migrating create-react-app from javascript to typescript

javascript

typescript

reactjs

create-react-app