先生と生徒の会話形式で理解しよう

生徒

「TypeScriptを学び始めたのですが、既にあるJavaScriptのコードを全部書き換えないといけないんですか？いきなり移行はこわいです。」

先生

「全部を一度に書き換える必要はありません。TypeScriptとJavaScriptには互換性があるので、少しずつ導入できます。」

生徒

「互換性ってどういう意味ですか？そのおかげで何ができるんですか？」

先生

「互換性とは、JavaScriptのファイルをそのままTypeScriptのプロジェクトで使えるという意味です。だから既存のコードを壊さずに段階的に移行できます。」

生徒

「なるほど…。具体的にどうやって導入していけばいいですか？」

先生

「では、TypeScriptとJavaScriptの互換性と、導入ステップを丁寧に解説しますね。」

1. TypeScriptとJavaScriptは高い互換性を持っている

TypeScriptはJavaScriptを拡張した言語です。元々のJavaScriptに、型の仕組みや開発支援機能を追加したものと考えると分かりやすいです。このため、JavaScriptのソースコードは、TypeScriptのプロジェクト内でそのまま使うことができます。

例えば、以下のようなJavaScriptのコードは、TypeScriptであってもそのまま実行できます。


function hello(name) {
    console.log("こんにちは " + name);
}
hello("太郎");

このように、JavaScriptは壊さずに活かせます。これが互換性です。互換性があることで、既存プロジェクトもゼロから作り直す必要がありません。

2. まず設定でJavaScriptを許可する（allowJs）

TypeScriptプロジェクトでは、設定ファイルであるtsconfig.jsonに、JavaScriptを受け入れる設定を追加します。


{
  "compilerOptions": {
    "allowJs": true
  }
}

allowJsを有効にすると、既存の.jsファイルをTypeScriptのコンパイル対象として扱えるようになります。

次のステップとして、JavaScriptのままでも型チェックを受けられるようにする方法があります。


{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

checkJsを有効にすると、エディタが型のヒントやエラーを知らせてくれるようになります。

ここまで準備ができたら、徐々にファイルを.jsから.tsに変更していきます。最初は簡単なファイルから始め、問題が起きてもすぐ戻せる範囲で進めることが重要です。


function add(a: number, b: number): number {
    return a + b;
}
console.log(add(3, 5));

このように、ファイルを移行しながら少しずつ型体系を導入していくことで、安全に開発できます。

急に全ての変数に厳密な型を付ける必要はありません。移行の途中では、いったんany型を使って問題を後回しにすることもできます。


let user: any = "太郎";
console.log(user.toUpperCase());

一気に型付けするのではなく、安全に変えていくという考え方が大切です。

TypeScriptを既存のJavaScriptプロジェクトへ導入する現実的な手順は次のとおりです。

この段階的移行こそ、TypeScriptとJavaScriptの互換性を活かした実践的な導入戦略です。