将TypeScript添加到现有的create-react-app应用

Question

我很难将TypeScript添加到已存在的 create-react-app应用程序中。以前我总是在开始项目之前添加它，只需create-react-app my-app --scripts-version=react-scripts-ts，但现在不行。

唯一的解决方案＆＃34;我发现here是：

1. 使用react-scripts-ts
创建临时项目
2. 复制tsconfig.json，tsconfig.test.json ，tslint.json从临时项目src文件夹到您项目的src文件夹。
3. 在package.json中，将脚本部分中对react-scripts的所有引用更改为react-scripts-ts。

这似乎是一种奇怪的解决方法，而且效率不高。有谁知道是否可以以比这更好的方式添加它？

Answer 1

从react-scripts 2.10开始，您可以将 TypeScript 添加到现有项目或创建新项目时。

现有项目

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

...然后将您的.js文件重命名为.tsx

新项目

yarn create react-app my-app --typescript

您可以阅读更多here。

Answer 2

您可以使用react-app-rewired将打字稿添加到项目的webpack配置中，这是弹出的更好选择。

如果你不确定如何从那里添加打字稿，here's a guide on how to do that.

Answer 3

有a recent pull request adding Typescript。它还没有合并。

此外，CRA的下一个主要版本将升级到Babel 7，它支持Typescript。

所以我建议你等几个星期。那么将TS添加到任何CRA项目应该非常容易。

Answer 4

如果要将TypeScript添加到现有的react应用中，请使用以下命令

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

将文件重命名为.ts或.tsx，例如，将index.js重命名为index.ts或index.tsx，然后启动服务器。这将自动生成tsconfig.json文件，您可以使用TypeScript编写React了。

Answer 5

要使用TypeScript启动新的Create React App项目，您可以运行：

npx create-react-app my-app --template typescript

Answer 6

您可以使用上传照片中的步骤将 typescript 安装到现有项目中...图片是 react 文档的屏幕截图