create-react-appのTypeScript対応方法について調べた - How create-react-app supports TypeScript

Summary

• use @babel/preset-typescript through @babel/preset-react-app
• type checking within webpack using ForkTsCheckerWebpackPlugin

Motivation

1. TypScriptでReactするおすすめの方法はなんだろう
2. ReactのサイトにTypeScriptの使い方って載ってない
3. create-react-appのドキュメントにはある
4. どんな設定になっているんだろう?

Detail

v3.2.0で確認

• 設定方法
• @babel/preset-typescriptが有効になる
• webpackの設定はtsconfig.jsonがあればTypeScript用の動作する
• 型チェックはForkTsCheckerWebpackPluginを使って行われる

感想

確認はしてないが、tscをつかうより@babel/plugin-transform-typescriptを使うほうがトランスパイルするのは早そうに感じる。すべての文法に対応しているかどうかわからない点が気になるといえば気になるが、型チェックのみTypeScriptを使うのはクリーンで良さそう。
babelを利用した場合は型チェックはされないがどうしているか確認したらForkTsCheckerWebpackを利用しているだけだった。ts-loaderを利用する場合もこちらをつかって、型チェックするほうが効率的な気がする。(未確認)