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

3 回答

• 1

  我发现了一个将create-react-app从javascript迁移到打字稿的解决方案，这样 doesn't require 弹出 .

  • 通过运行命令 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安装以下模块来安装反应的类型： @types/node ， @types/react 和 @types/react-dom . 如果使用package.json，请输入 devDependencies 部分 .

  • 将 index.js 文件名更改为 index.tsx

  • 在tsconfig.json文件中添加以下配置： "allowSyntheticDefaultImports": true - for more info

  NOTE 步骤7可能需要进一步修改取决于index.js文件中的内容（如果它依赖于项目中的JS模块） .

  现在你可以运行你的项目，它可能会工作，对于那些收到包含 You may need an appropriate loader to handle this file type 关于.js文件的错误的人，它发生是因为babel不知道如何从.tsx文件加载.js文件 . 我们需要做的是更改项目配置 . 我发现不运行 eject 的方式是使用react-app-rewired包 . 此程序包允许您配置将添加/覆盖默认项目设置的外部配置 . 我们'll do is using babel to load these type of files. Let'继续前进：

  • 使用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} ，这样你就可以在没有react-app-rewired的情况下混合使用JS和TS . 谢谢你提这个！

  UPDATE: create-react-app版本2.1.0支持typescript，所以对于那些从头开始的人，你可以用它来创建带有typescript的新应用程序，并根据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文件 .

  回复于 2024-04-27T02:22:41+08:00
• 44

  立即创建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 fork的现有应用程序，这里有一个关于how to port it to regular Create React App的教程 . ）

  回复于 2024-04-27T02:22:41+08:00
• 3

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

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

  • 将typescript扩展名 tsx 和 ts 添加到webpack configs（dev和prod）中的 extensions 表中 .

  • 添加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 设置为true .

  回复于 2024-04-27T02:22:41+08:00