在使用Create-React-App TypeScript模板时遇到问题，输出的是JS文件而不是TSX文件

Question

在尝试使用Create-React-App模板和TypeScript创建新的React应用程序时，我遇到了一个问题。我按照官方文档（https://create-react-app.dev/docs/adding-typescript/）上的说明进行操作，并使用了以下命令：

<code>npx create-react-app my-app --template typescript
</code>

以下是命令的结果：

正在安装软件包。这可能需要几分钟时间。

您正在使用的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，以获取新项目中支持的工具。

我的Node版本：v18.17.1 我的NPM版本：9.6.7

然而，在安装过程结束后，当我检查my-app文件夹中的文件时，我注意到文件的扩展名为.js，而不是TypeScript文件应有的.tsx。这似乎表明TypeScript没有正确配置。

我不确定我是否漏掉了任何步骤，或者设置有什么问题。在使用--template typescript选项时，是否有什么步骤我应该采取来确保TypeScript正确配置？

对于如何排除和解决此问题的任何指导或建议将不胜感激。提前感谢您的帮助！

Answer 1

问题

您正在使用的 create-react-app 版本不支持 --template 选项。因此，--template typescript 没有任何效果，您的项目中没有生成 .tsx 文件。

至于为什么 npx create-react-app 不使用支持 --template 的版本，我怀疑您在本地全局安装了旧版本的 create-react-app。我怀疑这是因为：

1. npx 可以运行本地安装的包（不仅限于远程包）：

   – npx 文档

2. npx 会提示是否安装远程包，但您的输出没有显示此提示。提示如下所示：

   Need to install the following packages:
     create-react-app@x.y.z
   Ok to proceed? (y)

您可以通过检查全局安装的包来验证上述内容：

• npm: npm list -g
• Yarn: yarn global list

解决方案

在验证了您是否全局安装了 create-react-app 之后，您可以卸载它：

• npm: npm uninstall -g create-react-app
• Yarn: yarn global remove create-react-app

create-react-app 还建议您不要全局安装版本：

– 入门指南：快速入门，创建 React 应用