在使用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 應用程式

#