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

标签 javascript reactjs typescript

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

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

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

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

最佳答案

从 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

您可以阅读更多in the docs .

如果您遇到问题,文档故障排除部分的以下内容可能会有所帮助:

Troubleshooting

If your project is not created with TypeScript enabled, npx may be using a cached version of create-react-app. Remove previously installed versions with npm uninstall -g create-react-app or yarn global remove create-react-app (see #6119).

关于javascript - 将 TypeScript 添加到现有的 create-react-app 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48967495/

相关文章:

javascript - 如何使用setInterval直到图像未加载?

javascript - 如何运行 Javascript 函数并在 Android 中获得返回?

typescript - 续写 TypeScript 中的模型 getter

css - 如何将自定义 css 添加到 Angular 中的单个 Toast 消息?

php - Ajax + 后退和前进按钮

javascript - Node.js 中 util.format() 的补充函数

javascript - 为什么一个组件的多个实例共享相同的状态?

reactjs - 使用Webpack使所有图像文件指向CDN

javascript - 我们可以模拟打印模式(媒体查询打印)进行单元测试吗?

angular - 如何在 Ag-grid 中获取更新的行