2019年４月にv3.0.0がリリースされた。
Release v3.0.0 · facebook/create-react-app
- Jest 24に対応
- Hooksをサポート
- TypeScriptのLintに対応
- browserslistをサポート
- jsconfig.json/tsconfig.json を使用した絶対位置インポートに対応
が追加機能となっている。 個人的にLintの設定変更がめんどくさくてTypeScriptに移行していなかったところがあるので、これを機にTypeScriptへの移行をやってみた。
リポジトリ
こちらを題材とした。 https://github.com/koirand/nixie-timer
create-react-appのバージョンアップ
プロジェクトフォルダで
$ yarn add react-scripts
とやると、現時点で最新版のv3.0.1が入った。
TypeScriptに移行してみる
TypeScriptをインストール
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest
jsファイルの拡張子をtsxに変更
拡張子はtsではなくtsxにする必要がある模様。 テストコードも含めて機械的にやるのみ。
tsconfig.jsonを作成
yarn start するとtsconfig.jsonが自動的に生成される。
"noImplicitAny": false
だけ追記して(修正がめんどくさかった)、その他はデフォルトのままとした。
コンパイルエラー修正
https://github.com/koirand/nixie-timer/pull/41/commits/9dcdaf07df3bb9d732432ea851289c99c82116f6
エラーの修正に加えて、PropTypesを使わない変更をしたり、ステータスの定数をenumにしたりした。
以上で、TypeScriptへの移行終わり。
VSCodeの設定変更
ESLintプラグインがデフォルトだとjsファイルしか見てくれないので、tsxファイルも見るように以下の設定を追加した。
{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}
感想
コンパイルエラーは意外と少なかった(2,3件くらい)。慣れれば数分で移行できそうなレベル。 プロトタイプはES6で書いて、商用のタイミングでTypeScriptに移行するのが良さそう。
個人的にIDEはAtom推しなのでAtomでの設定方法も調べてみたが、linter-eslintプラグインでtsxファイルを見るようにする方法が良くわからなかった。Reactの公式サイトでもVSCodeを推奨するとか書いてあったりするし、FlutterとかもVSCodeしかサポートしていなかったりするので、もうVSCodeでいいやという気になってきた。