create-react-appで作成したReactプロジェクトに、TypeScriptを導入する

3569 ワード
TypeScript create-react-app React TypeScript テキストリンク

すごい今更感ありますが、React の勉強も兼ねて、環境を1から作っていきました。
create-react-app で作成したプロジェクトに、TypeScriptを導入していきます。

やったこと

  • 必要なパッケージのインストール
  • create-react-app で作成された js ファイルを置換する
  • React の型定義をコンパイラに伝える

必要なパッケージのインストール

公式サイト に必要なパッケージが記載されています。
プロジェクト作成時にテンプレート使えば良かったじゃんとあとで気づきました

プロジェクトのルートディレクトリで下記コマンドを実行
公式では普通にインストールしていますが、ビルド時に必要なものと思うので、devDependencies でインストールします。

yarn add -D typescript @types/node @types/react @types/react-dom @types/jest

create-react-app で作成された js ファイル置換する。

  • レンダリングを行う js ファイル(jsxを使用しているファイル) -> tsx ファイル
    • 今回は src/App.js、src/App.test.tsx、src/index.jsが該当
  • ロジックのみ書かれているjsファイル -> ts ファイル
    • src/reportWebVitals.js、src/setupTests.js
src/App.tsx
import logo from './logo.svg';
import './App.css';
- function App() {
+ // 返り値の型書いておく
+ function App(): JSX.Element {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Edit <code>src/App.tsx</code> and save to reload.
        </p>
src/reportWebVitals.ts
- const reportWebVitals = onPerfEntry => {
+ import { ReportHandler } from 'web-vitals';
+
+ const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
    });
  }
};

export default reportWebVitals;

React の型定義をコンパイラに伝える

d.ts を作成します

src/react-app-env.d.ts
/// <reference types="react-scripts" />

これにて TypeScript の導入は完了です！

終わりに

GitHubのリポジトリにプルリクとして、やったことまとめてます。(こちら)
現在ならコマンド一つで TypeScript 込みの React プロジェクトを作ってくれますが、自身で書き換えを行ったことで、なんとなく理解度が上がった気がします。

これから実際に何か作ってみて、React の tips みたいなものをアウトプットしていきます