Bei der Verwendung der TypeScript-Vorlage „Create-React-App“ ist ein Problem aufgetreten. Die Ausgabe ist eine JS-Datei anstelle einer TSX-Datei

Question

Beim Versuch, eine neue React-Anwendung mit der Vorlage „Create-React-App“ und TypeScript zu erstellen, ist ein Problem aufgetreten. Ich habe die Anweisungen in der offiziellen Dokumentation (https://create-react-app.dev/docs/adding-typescript/) befolgt und den folgenden Befehl verwendet:

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

Das Folgende sind die Ergebnisse des Befehls:

Softwarepaket wird installiert. Das kann mehrere Minuten dauern.

Die von Ihnen verwendete Version von React-Scripts ist nicht mit der Option --template kompatibel.

Installieren von React, React-Dom und React-Scripts ...


995 Pakete in 32 Sekunden hinzugefügt

Es sind 34 Pakete auf der Suche nach einer Finanzierung
  Führen Sie „npm fund“ aus, um mehr zu erfahren

Erfolg! my-app-test unter /home/ristirianto/belajar-react/my-app-test erstellt
In diesem Verzeichnis können Sie mehrere Befehle ausführen:

  npm-Start
    Starten Sie den Entwicklungsserver.

  npm run build
    Verpacken Sie die Anwendung als statische Dateien für die Produktion.

  NPM-Test
    Starten Sie den Testläufer.

  npm run auswerfen
    Entfernen Sie das Tool und kopieren Sie die Build-Abhängigkeiten, Konfigurationsdateien und Skripte in das Anwendungsverzeichnis. Wenn Sie dies tun, können Sie nicht zurückkehren!

Wir empfehlen Ihnen, zunächst Folgendes einzugeben:

  cd mein-app-test
  npm-Start

Viel Spaß beim Programmieren!

HINWEIS: Das Bootstrapping dieses Projekts erfolgt mit einer älteren Version nicht unterstützter Tools.
Bitte aktualisieren Sie auf Node >=14 und npm >=6, um unterstützte Tools in neuen Projekten zu erhalten. 

Meine Knotenversion: v18.17.1 Meine NPM-Version: 9.6.7

Als ich jedoch nach dem Installationsvorgang die Dateien im Ordner my-app überprüfte, fiel mir auf, dass die Dateien die Erweiterung .js hatten. anstelle von .tsx, wie TypeScript-Dateien sein sollten. Dies scheint darauf hinzudeuten, dass TypeScript nicht richtig konfiguriert ist.

Ich bin mir nicht sicher, ob ich irgendwelche Schritte übersehen habe oder ob etwas mit der Einrichtung nicht stimmt. Muss ich irgendwelche Schritte unternehmen, um sicherzustellen, dass TypeScript korrekt konfiguriert ist, wenn ich die Option --template typescript verwende?

Für Hinweise oder Ratschläge zur Fehlerbehebung und Lösung dieses Problems wären wir sehr dankbar. Vielen Dank im Voraus für Ihre Hilfe!

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 应用