すごい今更感ありますが、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 みたいなものをアウトプットしていきます