ts-migrateでCreate React Appから作ったReactアプリを雑にTypeScript化する

「React #2 Advent Calendar 2020」3日目の記事です。

ts-migrate を使うと、JSをTSに変換してくれます。

なので過去にJSで書いたReactアプリをTS化したい時に、とりあえず試してみるとなかなか便利です。

準備

Create React Appの場合は、以下の2ファイルを別途用意しておきましょう。

• tsconfig.json
• src/react-app-env.d.ts

部品取り用に1つアプリを作って、そこからファイルをとってくれば良いと思います。

$ npx create-react-app test --typescript
$ mv test/tsconfig.json ./
$ mv test/src/react-app-env.d.ts ./src

必要なライブラリを追加する

主に型情報系ですが、インストールしておきましょう。

$ npm i -D @types/react @types/react-dom @types/node @types/jest typescript

Run ts-migrate

あとはts-migrateを実行していきます。まずはjs/jsx を ts/tsxにリネームします。

$ npx ts-migrate rename ./

その後TypeScriptに変換しましょう。

$ npx ts-migrate migrate ./

エラーの解消

このツールを使うと、TypeScriptでエラーが出た箇所には@ts-expect-errorが自動で付与されています。

npm run buildやnpm startなどで動作確認しつつ、@ts-expect-errorを解消していくように進めていくと良いでしょう。