【TypeScript】既存のReactアプリ(create-react-app)にTypeScriptを導入する方法

今回は、create-react-appで構築したアプリへTypeScriptを導入する方法を解説していきます。
※作成済みのアプリがある前提となります。

ちなみにcreate-react-appの場合、最初からTypeScriptのサポートが含まれているので、
環境構築の際に以下コマンドを実行することでTypeScriptを導入することが可能です。

//my-appはプロジェクト名(任意)
npx create-react-app my-app --template typescript

今回は、既存のcreate-react-appプロジェクトへTypeScriptを導入方法になります。

以下のサイトを参考に導入を進めていきます。
静的型チェック – React

Adding TypeScript

①TypeScriptの導入(インストール)

まずは以下のコマンドを実行し、TypeScriptをインストールします。

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

②ファイルの拡張子を「.tsx」に変更し、開発サーバを起動させる

拡張子を変更するファイルは任意で決めて頂いて問題ありません。
私は、参考サイトそのままに「src/index.js」を「src/index.tsx」へ変更しました。

次に、開発サーバーを起動させます。

npm start
# or
yarn start

すると「tsconfig.json」ファイルが生成されます。
f:id:hnm-n-1029:20200914143315p:plain

これで、TypeScriptが導入されました!

tsconfig.jsonについて

TypeScriptで書かれたコードはブラウザでは実行できないため、コンパイルしてJavaScriptに変換する必要があります。
このコンパイルを実行する際のオプションなどを指定するファイルが「tsconfig.json」になります。

tsconfig.jsonの編集については、私自身もまだ分からない部分が多いので今回は割愛します。※勉強してまた記事にしたいと思います。

今回は以上になります!


↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック

kenjimorita.jp