module-by-module-migration

依存関係グラフを下から上へ、モジュールごとに変換する

概要

JavaScript を TypeScript に移行する際は、依存関係グラフに従い、依存関係のないリーフモジュールから始めて上へ進めます。こうすることで、モジュールを変換するときには、その依存先がすべて型付け済みになります。これにより、型エラーを最小限に抑え、移行を管理しやすくできます。

このスキルを使用する場面

• 大規模なコードベースを TypeScript に移行するとき
• JavaScript を TypeScript に変換するとき
• 移行中の依存関係を管理するとき
• 移行順序を計画するとき
• チームで TypeScript を導入するとき

鉄則

依存関係のないリーフからモジュールの移行を始め、依存関係グラフを上へ進めます。これにより、依存元より先に依存先が型付けされます。

移行順序

Leaf modules (no dependencies):
  - utils.js → utils.ts
  - constants.js → constants.ts
  - helpers.js → helpers.ts

Middle modules (depend on leaves):
  - api.js → api.ts
  - components.js → components.ts

Entry points (most dependencies):
  - app.js → app.ts
  - index.js → index.ts

例

# 1. Convert utilities first (no dependencies)
# utils.js → utils.ts
# constants.js → constants.ts

# 2. Then services (depend on utilities)
# api.js → api.ts
# store.js → store.ts

# 3. Finally entry points (depend on everything)
# app.js → app.ts
# main.js → main.ts

参考資料

• Dan Vanderkam 著、『Effective TypeScript』第 2 版
• 項目 82：依存関係グラフを下から上へ、モジュールごとに変換する