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

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

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

--scripts-version=react-scripts-ts

但我没有找到任何解释如何将现有的JS项目迁移到TS.
我需要它以递增方式完成,这样我就可以使用.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或者如果你正在使用npm然后npm install react-scripts-ts,将react-scripts-ts添加到你的项目中.或者,将“react-scripts-ts”：“2.8.0”添加到package.json.
>从您在步骤1中创建的项目中复制文件：tsconfig.json,tsconfig.test.json tslint.json到您自己的项目
>在您自己的项目中,在package.json中,在scripts部分下,将react-scripts实例更改为react-scripts-ts(应该在启动,构建,测试和弹出之下)
>使用yarn或npm安装以下模块来安装反应类型：@ 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模块).

现在你可以运行你的项目,它可能会工作,对于那些得到错误的人你可能需要一个适当的加载器来处理关于.js文件的这个文件类型,它发生是因为babel不知道如何加载.js来自.tsx文件的文件.我们需要做的是更改项目配置.我发现没有运行弹出的方式是使用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”.

现在你可以启动你的项目,问题应该解决.您可能需要根据项目进行其他修改(其他类型等).

希望能帮助到你

正如评论中所建议的那样,可以在tsconfig.json文件中定义：“compilerOptions”：{“allowJs”：true},这样你就可以在没有react-app-rewired的情况下混合使用JS和TS.谢谢你提一下！

更新：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文件.

标签：create-react-app,javascript,typescript,reactjs
来源： https://codeday.me/bug/20191003/1851119.html