我在将TypeScript添加到一个已经存在的create-react-app应用程序时遇到了困难。以前我总是在启动项目之前添加它,简单地通过create-react-app my-app --scripts-version=react-scripts-ts
,但现在不起作用了。
我找到的唯一“解决方案”here是:
1.使用react-scripts-ts
创建临时项目
1.将tsconfig.json
、tsconfig.test.json
、tslint.json
从临时项目src文件夹复制到项目的src
文件夹。
1.在package.json
中,将脚本部分中对react-scripts
的所有引用更改为react-scripts-ts
。
这只是看起来像一个奇怪的变通方案,不是很有效。有人知道是否有可能以一种更好的方式添加它吗?
7条答案
按热度按时间qxsslcnc1#
从react-scripts 2.10开始,您可以将TypeScript添加到现有项目或在创建新项目时添加。
现有项目
...然后将
.js
文件重命名为.tsx
新项目
你可以阅读更多的in the docs。
如果您遇到问题,文档的故障排除部分中的以下内容可能会有所帮助:
疑难排解
如果您的项目不是在启用TypeScript的情况下创建的,npx可能使用了create-react-app的缓存版本。使用npm uninstall -g create-react-app或yarn global remove create-react-app删除以前安装的版本(请参见#6119)。
uwopmtnx2#
如果要将TypeScript添加到现有的react应用程序,请使用以下命令
将至少一个文件从
js/jsx
重命名为.ts/tsx
。例如,将index.js
重命名为index.ts
或index.tsx
,然后启动服务器。这将自动生成tsconfig.json
文件,您就可以在TypeScript中编写React了。mi7gmzs63#
您可以使用下列其中一个命令,将 typescript 加入现有的项目:
要将TypeScript添加到现有的Create React App项目,请先安装它:
或
您可以阅读更多here
但问题是,当你改变一个文件,除了index.js,如
App.js
到App.tsx
,它给你一个错误,模块找不到错误不能解决'./App' .这个问题的来源是缺乏一个tsconfig.json文件.所以通过创建一个错误将被删除.我建议使用下面的tsconfig:ffscu2ro4#
有a recent pull request adding Typescript。它还没有合并。
此外,CRA的下一个主要版本将升级到Babel 7,它支持Typescript。
所以我建议你再等几个星期,到时候在CRA项目中加入TS应该会很容易。
ar7v8xwq5#
在撰写本文时,这个答案是最好的选择,但现在CRA有内置的TS支持。See the top answer.我将保留它以备将来使用。
您可以使用react-app-rewired将typescript添加到项目的webpack配置中,这是一个比弹出更好的选择。
如果您不确定如何从此处添加打印脚本,here's a guide on how to do that.
ssm49v7z6#
如果决定在现有的create-react-app项目中添加typescript,一切都不起作用。最后,我使用typescript模板创建了一个全新的一次性应用程序,并将下面的tsconfig.json粘贴到我现有的项目中。现在一切都很好,但这是一个奇怪的解决方案。
mi7gmzs67#
要使用TypeScript启动新的Create React App项目,可以运行: