🙃

JSからTSへの移行ツール、ts-migrateを試してみた

2020/09/16に公開

JavaScript

React

TypeScript

tech

airbnbからjs→ts移行のツールが出ましたね…！

早速使ってみたので、その手順と使用感について書きたいと思います。

コード量によるのですがかなり簡単にできるように感じました。
TSにしたいけど面倒やなぁって感じてる方に是非！

移行前のファイル

簡単なテンプレを使って試してみました！
これをts化させていきます。

├── src
│   ├── img
│   │   └── common
│   │       └── favicon.png
│   ├── js
│   │   └── app.js
│   ├── jsx
│   │   ├── components
│   │   │   └── styledComponent
│   │   │       └── GlobalStyle.jsx
│   │   ├── containers
│   │   │   ├── Hoge.jsx
│   │   │   └── Top.jsx
│   │   └── index.jsx
│   └── pug
│       └── index.pug
└── webpack.config.js

インストール→実行まで

インストール

$ npm install --save-dev ts-migrate

###実行の前に

実行してみようとしたら以下のような注意文が出てきます！
（個人的にこの親切さにちょっと感動でした）

$ npx ts-migrate-full src
Welcome to TS Migrate! :D

This script will migrate a frontend folder to a compiling (or almost compiling) TS project.

It is recommended that you take the following steps before continuing...

1. Make sure you have a clean git slate.
   Run `git status` to make sure you have no local changes that may get lost.
   Check in or stash your changes, then re-run this script.

2. Check out a new branch for the migration.
   For example, `git checkout -b ts-migrate` if you're migrating several folders or
   `git checkout -b ts-migrate-src` if you're just migrating src.

3. Make sure you're on the latest, clean master.
   `git fetch origin master && git reset --hard origin/master`

4. Make sure you have the latest npm modules installed.
   `npm install` or `yarn install`

If you need help or have feedback, please file an issue on Github!

Continue? (y/N)

なので以下の手順で準備します。

・現在の変更分をpushしておく

・ ts-migration用にブランチを作って、移動する

git checkout -b ts-migrate

・新しく作成したブランチを最新の状態にする

git fetch origin master && git reset --hard origin/master

・ node_modulesも最新の状態にしておく

npm install or yarn install

これで実行の準備ができました！

実行

$ npx ts-migrate-full src
Welcome to TS Migrate! 
:
:
Continue? (y/N) y

こんなの出てきます。ts-compilerの読み込み先を変更することができます。
必要なければエンター！

Set a custom path for the typescript compiler. (It's an optional step. Skip if you don't need it. Default path is ./node_modules/.bin/tsc.):

Set a custom path for the typescript compiler. (It's an optional step. Skip if you don't need it. Default path is ./node_modules/.bin/tsc.):
Your default tsc path is ./node_modules/.bin/tsc.

[Step 1 of 4] Initializing ts-config for the "src"...

Config file created at /Users/***/private/ts-migrate-test/src/tsconfig.json
fatal: not a git repository (or any of the parent directories): .git
/Users/***/private/ts-migrate-test/ts-migration

[Step 2 of 4] Renaming files from JS/JSX to TS/TSX and updating project.json\...

Renaming 5 JS/JSX files in /Users/***/private/ts-migrate-test/src...
Done.
fatal: not a git repository (or any of the parent directories): .git
/Users/***/private/ts-migrate-test

[Step 3 of 4] Fixing TypeScript errors...

forkTSServer
Logs in /var/folders/cm/9m82j_0n7dj6k0lgkkwvfc700000gn/T/ts-migrate-log-fgvI9i
TypeScript version: 3.9.7
Initialized tsserver project in 234.291ms.
Start...
[strip-ts-ignore] Plugin 1 of 12. Start...
[strip-ts-ignore] Finished in 40.226ms.
[hoist-class-statics] Plugin 2 of 12. Start...
[hoist-class-statics] Finished in 17.350ms.
[react-props] Plugin 3 of 12. Start...
[react-props] Finished in 4.123ms.
[react-class-state] Plugin 4 of 12. Start...
[react-class-state] Finished in 0.567ms.
[react-class-lifecycle-methods] Plugin 5 of 12. Start...
[react-class-lifecycle-methods] Finished in 11.313ms.
[react-default-props] Plugin 6 of 12. Start...
[react-default-props] Finished in 3.017ms.
[react-shape] Plugin 7 of 12. Start...
[react-shape] Finished in 1.363ms.
[declare-missing-class-properties] Plugin 8 of 12. Start...
[declare-missing-class-properties] Finished in 2260.641ms.
[explicit-any] Plugin 9 of 12. Start...
[explicit-any] Finished in 89.735ms.
[eslint-fix] Plugin 10 of 12. Start...
[eslint-fix] Finished in 1898.320ms.
[ts-ignore] Plugin 11 of 12. Start...
[ts-ignore] Finished in 293.852ms.
[eslint-fix] Plugin 12 of 12. Start...
[eslint-fix] Finished in 83.437ms.
Finished in 4706.702ms, for 12 plugin(s).
Writing 4 updated file(s)...
Wrote 4 updated file(s) in 1.213ms.
fatal: not a git repository (or any of the parent directories): .git
/Users/***/private/ts-migrate-test

[Step 4 of 4] Checking for TS compilation errors (there shouldn't be any).

./node_modules/.bin/tsc -p src/tsconfig.json

---
All done!

The recommended next steps are...

1. Sanity check your changes locally by inspecting the commits and loading the affected pages.

2. Push your changes with `git push`.

3. Open a PR!

完了！！

このようになりました:point_down:
jsファイルがtsに、jsxファイルがtsxになってます。
また、指定したディレクトリ直下に tsconfig.jsonが設置されます。

├── src
│   ├── img
│   │   └── common
│   │       └── favicon.png
│   ├── js
│   │   └── app.ts
│   ├── jsx(→ディレクトリ名は変わらないので自分で変更必要です）
│   │   ├── components
│   │   │   └── styledComponent
│   │   │       └── GlobalStyle.tsx
│   │   ├── containers
│   │   │   ├── Hoge.tsx
│   │   │   └── Top.tsx
│   │   └── index.tsx
│   ├── pug
│   │   └── index.pug
│   └── tsconfig.json
└── webpack.config.js

調整

大まかな移行は完了しましたが、まだまだ調整は必要です！
設定になるので人それぞれではありますが、今回使用したコードで調整していきます。

調整方法について

こちらのサイトが非常に参考になります！
TypeScript Deep Dive

tsconfig.jsonを追加する

ソースコードの拡張子を .jsから.tsに変更する。any型を使ってエラーを抑制する

新しいコードはTypeScriptで記述し、できるだけanyを使わないようにする

古いコードに戻り、型アノテーションを追加し、バグを修正する

サードパーティ製JavaScriptコードの型定義を使用する

ts-migrateでは2番目(拡張子 .jsから.tsに変更 / any型を追加して抑制)まで自動でやってくれます！
既存のコードにはcodemodを使って基本的にはanyがつくようになっているみたいです！（すご）

typescript , tsloaderのinstall

$ npm i -D typescript ts-loader

コンパイルの調整

webpack.config.js

mode: 'development',
  entry: {
    user: [`${path.join(__dirname, 'src')}/jsx/index.jsx`]
  },
  output: {
    path: `${__dirname}/${options.mode === 'development' ? 'dist' : 'build'}/`,
    filename: 'js/[name].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js[x]?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
resolve: {
    modules: [`${__dirname}/src`, 'node_modules'],
    extensions: ['.js', '.jsx']
  },

以下のポイントを変更していきます

・エントリーポイント (index.jsx→index.tsxに)
・読み込まれるファイル(js,jsx→ts,tsxに)
・loader(babel-loader→ts-loaderに)
・resolve/extensions(ts,tsxの追加)

mode: 'development',
  entry: {
    user: [`${path.join(__dirname, 'src')}/jsx/index.jsx`]
  },
  output: {
    path: `${__dirname}/${options.mode === 'development' ? 'dist' : 'build'}/`,
    filename: 'js/[name].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.ts[x]?/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
resolve: {
    modules: [`${__dirname}/src`, 'node_modules'],
    extensions: ['.js', '.ts', '.tsx']
  },

tsconfig.json

とりあえず以下のように設定しました！(ほぼデフォルトです）

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

設定に関しては詳しくはこちらの方の記事がすごくわかりやすいです！

上記のように設定しましたが"noImplicitAny"に関してはfalseにしておいてもいいのでは？と思っています。
(↓緩いTSのススメ/参考記事です)

各ファイルの調整

このようにここの部分でこんなエラー出るよ〜って教えてくれます！（例えば@type/**のインストールしなさいよ、とか）
なのでそれに沿ってエラーを潰していく作業です。

スクリーンショット 2020-08-25 10.59.21.png

今回のファイルだとnpm install @types/react @types/react-dom @types/react-router-domなどなど。

ちなみに
@ts-expect-errorはts3.7からの新機能で

コンパイルエラーを無視させる
主にテスト時に不正な使い方をしたいときなどに使える
@ts-expect-error はunusedだと怒られる

なのでエラーを消したら@ts-expect-errorの部分もまとめて消していけばOKです。

全ファイルエラーつぶせば移行完了です！

やってみたときのGitHub

感想

少ないファイルではありますが迷いながらも30分もかからずに終わりました。
自分で書き換えなきゃいけない箇所が一目でわかるので、大きいプロジェクトだともちろん時間かかりますが、あまりストレスなく移行できそうです。

これでTS化の波にブーストがかかるのでは…！

参照

ts-migration 公式
 ts-migration 公式使い方
 ts-migration 公式BLOG