Create-React-App TypeScript テンプレートの使用時に問題が発生し、出力が TSX ファイルではなく JS ファイルになる

Question

Create-React-App テンプレートと TypeScript を使用して新しい React アプリケーションを作成しようとしたときに、問題が発生しました。公式ドキュメント (https://create-react-app.dev/docs/adding-typescript/) の手順に従い、次のコマンドを使用しました。

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

コマンドの結果は次のとおりです。

ソフトウェア パッケージをインストールしています。ちょっと時間かかります。

使用している反応スクリプトのバージョンは、--template オプションと互換性がありません。

反応、反応ダム、反応スクリプトをインストールしています...


32 秒で 995 個のパッケージが追加されました

資金を求めているパッケージが 34 件あります
  詳細については「npm Fund」を実行してください

成功！ /home/ristirianto/belajar-react/my-app-test に my-app-test を作成しました
このディレクトリ内では、いくつかのコマンドを実行できます。

  npmスタート
    開発サーバーを起動します。

  npm ビルドを実行する
    アプリケーションを実稼働用の静的ファイルとしてパッケージ化します。

  npmテスト
    テストランナーを起動します。

  npm実行イジェクト
    ツールを削除し、ビルドの依存関係、構成ファイル、およびスクリプトをアプリケーション ディレクトリにコピーします。こうなったらもう戻れなくなるよ！

まずは次のように入力することをお勧めします。

  cd 私のアプリテスト
  npmスタート

楽しいプログラミングを！

注: このプロジェクトは、サポートされていない古いバージョンのツールを使用してブートストラップされています。
新しいプロジェクトでサポートされているツールを入手するには、Node >=14 および npm >=6 に更新してください。 

私のノードのバージョン: v18.17.1 私の NPM バージョン: 9.6.7

しかし、インストール プロセス後、my-app フォルダー内のファイルを確認すると、ファイルの拡張子は代わりに .js であることに気付きました。 .tsx を TypeScript ファイルと同じようにします。これは、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

   では、リモート パッケージをインストールするかどうかを確認するプロンプトが表示されますが、出力にはこのプロンプトが表示されません。プロンプトは次のとおりです: リーリー

グローバルにインストールされているパッケージを確認することで、上記を確認できます。

npm:

npm リスト -g
• Yarn:
yarn グローバル リスト
• ＃＃＃解決＃＃＃
create-react-app

がグローバルにインストールされていることを確認したら、アンインストールできます:

npm: npm uninstall -g create-react-app

Yarn:
• yarn グローバル削除 create-react-app
• create-react-app バージョンをグローバルにインストールしないこともお勧めします:

–

スタートガイド: React アプリ作成のクイック スタート