ファイル単位の変換戦略
問題を起こさずに.jsを段階的に.tsへ変更します。
「ファイル単位の変換戦略」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
段階的なアプローチ
ファイル単位の変換では、1回に1つの.jsファイルの名前を.tsに変更し、その過程で型エラーを修正します。これにより、各段階でプロジェクトをコンパイル可能な状態に保てます。
# Step 1: rename
mv src/utils.js src/utils.ts
# Step 2: fix errors
npx tsc --noEmit
# Step 3: commit and repeat開始地点の選び方
リーフモジュールから始めます。これは、他のプロジェクトファイルをインポートしていないファイルです。先に満たす必要のある下流のTypeScript依存関係がないため、変換しやすくなります。
# Find files with fewest imports from other project files:
grep -r "from './" src --include="*.js" | sort | uniq -c | sort -n
# Convert lowest-count files first暗黙のanyエラーへの対処
JSファイルの名前を.tsに変更すると、noImplicitAny: trueの場合、型のないパラメーターが暗黙のanyエラーになります。明示的な型を追加するか、一時的にanyを使います。
// Before: JS
function process(data) { return data.value; }
// After: TS (add annotation)
function process(data: { value: string }) { return data.value; }
// Or temporarily:
function process(data: any) { return data.value; }一時的なエラーの抑制
修正が難しい行には// @ts-ignoreを使い、忘れないようにTODOとして記録します。
// TODO: type this properly in follow-up PR
// @ts-ignore
const result = complexLegacyFunction(x);インポート文の更新
ファイルが.tsになると、それを利用する側でインポートの更新が必要になる場合があります。TypeScriptは、インポートパスにファイル拡張子がなくても.tsファイルを自動的に解決します。
// No extension needed — TypeScript finds .ts
import { process } from "./utils";サードパーティのrequireの変換
TypeScriptのモジュール解決に合わせるため、変換中にCommonJSのrequire呼び出しをESモジュールのimport構文に置き換えます。
// Before: CommonJS
const fs = require("fs");
// After: ES module
import fs from "fs";strictモードの段階的な導入
ファイル単位の// @ts-strict-ignoreコメントを使うか、strictを有効にした別のtsconfigへ移行することで、strictフラグをファイルごとに段階的に有効にします。
// tsconfig.strict.json — points to converted files only
{
"extends": "./tsconfig.json",
"compilerOptions": { "strict": true },
"include": ["src/converted/**/*"]
}残りのファイルの追跡
チェックリストを用意するかスクリプトを使って、残っている.jsファイルの数を数え、時間の経過に伴う移行の進捗を追跡します。
find src -name "*.js" | wc -l # remaining JS files
find src -name "*.ts" | wc -l # converted TS files大規模なPRを避ける
レビューしやすい規模に保つため、1つのPRにつき1ファイルを変換します。TypeScriptの大規模な移行も、個々のファイルに範囲を限定すれば、レビューや差し戻しが容易になります。
# Good: one file per PR
# Bad: 50 files renamed in one PR変換後のテスト実行
TypeScriptの型チェッカーでは検出できない実行時のリグレッションを見つけるため、ファイルを変換するたびにテストスイートを実行します。
npm test
# Ensure all tests pass after each .js → .ts renameまとめ：ファイル単位の戦略
まずリーフファイルを変換し、エラーを修正または抑制します。各段階でプロジェクトをコンパイル可能な状態に保ち、残りのJSファイルを追跡し、レビューしやすいように1つのPRにつき1ファイルを提出します。
確認問題
ファイル単位で移行する場合、最初にTypeScriptへ変換すべきなのはどのファイルですか？
学んだこと
ファイル単位で移行する場合は、リーフモジュールから始め、名前を.tsに変更し、エラーを修正または抑制し、プロジェクトをコンパイル可能な状態に保ちながら進捗を追跡します。PRごとに小さく変換すれば、安全でレビューしやすい移行になります。
よくある質問
「ファイル単位の変換戦略」レッスンは無料ですか？
はい。「ファイル単位の変換戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「ファイル単位の変換戦略」で何を学びますか？
問題を起こさずに.jsを段階的に.tsへ変更します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ファイル単位の変換戦略」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。