【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
①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」ファイルが生成されます。
これで、TypeScriptが導入されました!