React + TypeScriptプロジェクトをcreate-react-appに任せる

⚠注意

まず、この記事が書かれた日付と、以下のバージョンを確認してください。
この記事は公式ドキュメントへの案内程度の役割を持てたらな、と思っています。

.sh

$ 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プロジェクトを作る場合

以下のコマンドを叩くだけでいいみたいですね。

.sh

$ 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の依存には含まれていないので、手動で追加しましょう。

.sh

$ 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をサポートしてくれたので、今後はひとつ手間が減ることになるのではないでしょうか。期待です。