Rencontre d'un problème lors de l'utilisation du modèle Create-React-App TypeScript, la sortie est un fichier JS au lieu d'un fichier TSX

Question

J'ai rencontré un problème en essayant de créer une nouvelle application React à l'aide du modèle Create-React-App et de TypeScript. J'ai suivi les instructions de la documentation officielle (https://create-react-app.dev/docs/adding-typescript/) et utilisé la commande suivante :

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

Voici les résultats de la commande :

Installation du progiciel. Cela peut prendre plusieurs minutes.

La version des scripts de réaction que vous utilisez est incompatible avec l'option --template.

Installation des scripts React, React-Dom et React...


995 packages ajoutés en 32 secondes

Il y a 34 packages en recherche de financement
  Exécutez `npm fund` pour en savoir plus

succès! créé mon-app-test sous /home/ristirianto/belajar-react/my-app-test
Dans ce répertoire, vous pouvez exécuter plusieurs commandes :

  npm démarrer
    Démarrez le serveur de développement.

  npm exécuter la construction
    Conditionnez l'application sous forme de fichiers statiques pour la production.

  test npm
    Démarrez le programme d'exécution de test.

  npm exécuter éjecter
    Supprimez l'outil et copiez les dépendances de build, les fichiers de configuration et les scripts dans le répertoire de l'application. Si vous faites cela, vous ne pourrez pas revenir !

Nous vous recommandons de commencer par taper :

  cd mon-app-test
  npm démarrer

Bonne programmation !

REMARQUE : ce projet est démarré à l'aide d'une ancienne version d'outils non pris en charge.
Veuillez mettre à jour vers Node >=14 et npm >=6 pour obtenir les outils pris en charge dans les nouveaux projets. ≪/pré>
Version de mon nœud : v18.17.1
Ma version NPM : 9.6.7
Cependant, après le processus d'installation, lorsque j'ai vérifié les fichiers dans le dossier my-app, j'ai remarqué que les fichiers portaient l'extension .js, au lieu de .tsx comme devraient l'être les fichiers TypeScript. Cela semble indiquer que TypeScript n'est pas configuré correctement. 
Je ne sais pas si j'ai manqué des étapes ou s'il y a un problème avec la configuration. Dois-je prendre des mesures pour m'assurer que TypeScript est correctement configuré lors de l'utilisation de l'option --template typescript 
Toute orientation ou tout conseil sur la façon de dépanner et de résoudre ce problème serait grandement apprécié. Merci d'avance pour votre aide! 
            

Answer 1

Question

Le fichier create-react-app 版本不支持 --template 选项。因此，--template typescript 没有任何效果，您的项目中没有生成 .tsx que vous utilisez.

Quant à pourquoi npx create-react-app 不使用支持 --template 的版本，我怀疑您在本地全局安装了旧版本的 create-react-app. Je suppose que c'est parce que :

1. npx Peut exécuter des packages installés localement (non limité aux packages distants) :

   – npxDocumentation

2. npx vous demandera s'il faut installer le package distant, mais votre sortie n'affiche pas cette invite. Les conseils sont les suivants :

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

Vous pouvez vérifier ce qui précède en vérifiant les packages installés globalement :

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

Solution

Après avoir vérifié que vous l'avez installé globalement create-react-app vous pouvez le désinstaller :

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

create-react-app Il est également recommandé de ne pas installer la version globalement :

– Guide de démarrage : démarrez rapidement et créez une application React