TypeScript を React プロジェクトに追加する

簡単なコマンドを使用して、新旧の反応プロジェクトに TypeScript を追加する方法を紹介します。

TypeScript を React プロジェクトに追加する

多くの開発者は、React プロジェクトと Angular プロジェクトの両方で TypeScript を使用することを好みます。 JavaScript でビルドされたアプリケーションやプロジェクトを取得し、これらのプロジェクトに TypeScript を追加したい場合があります。

このチュートリアルでは、新しい React アプリケーションを作成するシナリオと、既にビルドされたプロジェクトに TypeScript を追加するシナリオの両方について説明します。 まず、react アプリケーションの新規インストールから始めましょう。

TypeScript テンプレートを使用して React アプリケーションをインストールするには、2つの方法があります。 1つは npx を使用する方法です。

次のコマンドを使用すると、TypeScript テンプレートを使用して新しい React アプリケーションを簡単にインストールできます。

# NPX
npx create-react-app New-app --template typescript

このコマンドは、最新バージョンの新しい React アプリケーションをインストールします。 ここで、yarn を使用して反応アプリケーションをインストールする場合は、以下のコマンドを実行できます。

# YARN
yarn create-react-app New-app --template typescript

では、JavaScript テンプレートを使用してビルドされたプロジェクトが既にあり、それを TypeScript フレームワークに変換したいという 2 番目のシナリオを見てみましょう。

まず、以下に示すように、npm を使用して TypeScript をプロジェクトにインストールするために、次のコマンドを実行する必要があります。

# NPM
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

yarn を使用してプロジェクトをインストールした場合は、以下のコマンドを実行する必要があります。

# YARN
yarn add typescript @types/node @types/react @types/react-dom @types/jest

TypeScript とその依存関係をインストールしたら、JavaScript ファイルの名前を .js から .ts に変更できます。 すべてのファイルを TypeScript に変更したら、開発サーバーを再起動します。

タイプに関連するいくつかのエラーがあります。 新しい機能を開発する前に、プロジェクトのニーズに応じてこれらのエラーを修正する必要があります。