在使用Create-React-App TypeScript模板时遇到问题,输出的是JS文件而不是TSX文件
P粉680487967
2023-08-17 13:21:24
<p>在尝试使用Create-React-App模板和TypeScript创建新的React应用程序时,我遇到了一个问题。我按照官方文档(https://create-react-app.dev/docs/adding-typescript/)上的说明进行操作,并使用了以下命令:</p>
<pre class="lang-bash prettyprint-override"><code>npx create-react-app my-app --template typescript
</code></pre>
<p>以下是命令的结果:</p>
<pre class="brush:php;toolbar:false;">正在安装软件包。这可能需要几分钟时间。
您正在使用的react-scripts版本与--template选项不兼容。
正在安装react、react-dom和react-scripts...
在32秒内添加了995个软件包
有34个软件包正在寻找资金
运行 `npm fund` 了解详情
成功!在/home/ristirianto/belajar-react/my-app-test下创建了my-app-test
在该目录中,您可以运行多个命令:
npm start
启动开发服务器。
npm run build
将应用程序打包为用于生产的静态文件。
npm test
启动测试运行器。
npm run eject
删除此工具并将构建依赖项、配置文件和脚本复制到应用程序目录中。如果这样做,您将无法返回!
我们建议您从输入以下内容开始:
cd my-app-test
npm start
愉快的编程!
注意:该项目是使用旧版本的不受支持的工具引导的。
请更新到Node >=14和npm >=6,以获取新项目中支持的工具。</pre>
<p>我的Node版本:v18.17.1
我的NPM版本:9.6.7</p>
<p>然而,在安装过程结束后,当我检查<code>my-app</code>文件夹中的文件时,我注意到文件的扩展名为<code>.js</code>,而不是TypeScript文件应有的<code>.tsx</code>。这似乎表明TypeScript没有正确配置。</p>
<p>我不确定我是否漏掉了任何步骤,或者设置有什么问题。在使用<code>--template typescript</code>选项时,是否有什么步骤我应该采取来确保TypeScript正确配置?</p>
<p>对于如何排除和解决此问题的任何指导或建议将不胜感激。提前感谢您的帮助!</p>
问题
您正在使用的
create-react-app
版本不支持--template
选项。因此,--template typescript
没有任何效果,您的项目中没有生成.tsx
文件。至于为什么
npx create-react-app
不使用支持--template
的版本,我怀疑您在本地全局安装了旧版本的create-react-app
。我怀疑这是因为:npx
可以运行本地安装的包(不仅限于远程包):–
npx
文档npx
会提示是否安装远程包,但您的输出没有显示此提示。提示如下所示:您可以通过检查全局安装的包来验证上述内容:
npm list -g
yarn global list
解决方案
在验证了您是否全局安装了
create-react-app
之后,您可以卸载它:npm uninstall -g create-react-app
yarn global remove create-react-app
create-react-app
还建议您不要全局安装版本:– 入门指南:快速入门,创建 React 应用