kenjuの日記

About Programming, Mathematics and Security

BabelからTypeScriptの移行作業知見メモ

社内のrepositoryを、BabelからTypeScriptへ一気に移行した。 その時の作業を振り返ってみる。

移行作業のゴール

まずは「コンパイルを通すこと」を目的にした。 細かい型定義は後から徐々に増やしていけば良い。

作業項目

  • import文の置き換え
    • import * as SomeComponent from '...'; のように、default exportsしていないmoduleの扱い方がBabel/TypeScript間で非互換性が存在していた
  • コンパイルが通らない箇所にはany型を追加
  • コンパイルを通すために必要なDefinitelyTypedの追加
  • コンパイルを通すために必要な独自型の追加
    • といってもこれは数が少なく、2~3ファイル程度。基本的に型定義ファイルをコストをかけてメンテナンスして行かないため、可能な限り最小限で

作業時の工夫

以下は別PRで対応。というのも、普通にファイル数での差分が215となったため、レビューコストを考慮。とはいえ、ほとんどは単純な型追加や、ファイルの拡張子をs/.jsx?/.tsxしただけではある。

  • TSLint追加
  • tsconfig.jsonに設定するコンパイルオプションの精査
  • TypeScript導入によってテストカバレッジが動かなくなったので、その修正
  • Babel依存の削除

知見メモ

  • テストはts-node with mocha
    • 一旦build/ディレクトリなどにビルドした上で、mochaでテストしに行く方法とも比較したが、中間ファイルを作らずにts-nodeでテストする方が全体的にシンプルと判断
    • ちなみにその際、NODE_PATH=./clientを用いてts-nodeが利用するtsconfig.jsonファイルへのPATHを教えてあげる必要がある
  • VSCodeでの補完機能が優秀で、tsconfig.jsonを一つのプロジェクトで複数管理していても、ディレクトリ構成から推測して適した設定を元に補完してくれる
    • そこで、client/, spec/それぞれのtsconfig.jsonは分けている