将 TypeScript 添加到现有的 create-react-app 应用程序答案

【问题标题】：Adding TypeScript to existing create-react-app app将 TypeScript 添加到现有的 create-react-app 应用程序
【发布时间】：2018-08-04 16:03:52
【问题描述】：

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

我找到的唯一“解决方案”here 是：

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

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

【问题讨论】：

【解决方案1】：

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

现有项目

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

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

新项目

yarn create react-app my-app --template typescript

您可以阅读更多here。

【讨论】：

这很顺利。我从现有的 ES-CRA 迁移到 TS-CRA 时遇到的一件事是必须更改 ESLINT 设置：robertcooper.me/…
tsconfig 文件呢？我们不需要添加它吗？
@iRohitBhatia 文档说“您不需要制作 tsconfig.json 文件，将为您制作一个”，但这仅适用于新项目，因为该文件不是为现有项目创建的项目。我们应该为现有项目做些什么......只需创建一个？
深入挖掘，“当 CRA 在您的源文件夹中发现 .ts 文件时，它会自动为您创建一个 tsconfig.json 文件”，它会自动为您创建该文件。
不行，Module not found: Error: Can't resolve 出现

【解决方案2】：

如果您想将 TypeScript 添加到现有的 react 应用程序，请使用以下命令

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

将至少一个文件从 js/jsx 重命名为 .ts/tsx。例如，将index.js 重命名为index.ts 或index.tsx，然后启动服务器。这将自动生成tsconfig.json 文件，您就可以在 TypeScript 中编写 React。

【讨论】：

如果我重命名index.js，则没有发生错误，但如果我对其他文件执行此操作，则会出现此错误Module not found: Error: Can't resolve ...。也没有生成tsconfig.json 文件

【解决方案3】：

有a recent pull request adding Typescript。尚未合并。

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

所以我建议你再等几周。将 TS 添加到任何 CRA 项目应该非常容易。

【讨论】：

【解决方案4】：

在撰写本文时，此答案可能是最佳选择，但现在 CRA 已内置 TS 支持。 See the top answer.我会保留这个作为历史记录。

您可以使用 react-app-rewired 将 typescript 添加到项目的 webpack 配置中，这是一个更好的替代方法。

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

【讨论】：

【解决方案5】：

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

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

【讨论】：