⚠注意
まず、この記事が書かれた日付と、以下のバージョンを確認してください。
この記事は公式ドキュメントへの案内程度の役割を持てたらな、と思っています。
$ npx create-react-app --version
npx: 63個のパッケージを4.086秒でインストールしました。
2.1.1
$ npm view typescript version
3.2.2
create-react-app と TypeScript
facebook社公式のReactプロジェクト生成ツール create-react-app ですが、2018/10/29リリースの v2.1.0 で TypeScriptを公式サポートするようになりました。
以前までその役目を行っていたのが、create-react-appのforkリポジトリである react-scripts-tsでしたが、これを利用せずともcreate-react-appだけでTypeScriptを組み込めるようになったため役目を終えたようで、deprecatedとなってしまいました。
新規にTypeScriptなReactプロジェクトを作る場合
以下のコマンドを叩くだけでいいみたいですね。
$ npx create-react-app my-app --typescript
create-react-appで作った既存のプロジェクトの場合
deprecatedとなった react-scripts-ts から create-react-appに以降しましょう。以下のブログ記事に移行方法が書かれています。
これをStep.1から順に行うと移行できます。
ハマったところ
トラブルシューティングを読めばだいたい解決するはず…！
https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/#troubleshooting
1. tslint, tslint-react が消えた
npm remove react-scripts-ts すると諸々のパッケージが消えますが、TSLintも消えます。
create-react-appの依存には含まれていないので、手動で追加しましょう。
$ npm install --save-dev tslint tslint-react
2. 大量の型エラーが出る
上であげたブログ記事にも書いてありますが、tsconfigのlibを指定しましょう。
3. tsconfigでなんか怒られる
これも記事に書いてありますが、予約されている、というかユーザーが指定できないtsconfigのパラメータがあります。それ以外の値を指定しましょう。
4. storybookが死ぬ
これも記事に書いてあります！
この手順に従えば動きましたが、Create React AppではBabelを使う一方でstorybookではTypeScriptを使うみたいですね。なんか複雑な感じに・・・。
Additionally, while Create React App uses Babel to parse JSX, Storybook expects TypeScript to do so.
おわりに
私はVueやNuxt.jsから近年のフロントエンドに触り始めたので、Reactはなかなか設定が多くて大変だなーと思ってしまいがちです。
今回create-react-appがTypeScriptをサポートしてくれたので、今後はひとつ手間が減ることになるのではないでしょうか。期待です。