TypeScriptの関数のオーバーロードとは？

はじめに

TypeScriptを使っていると「関数のオーバーロード」という言葉を目にすることがあります。

でも正直、「オーバーロードって何？」「使う意味あるの？」「難しそう…」と思う方も多いのではないでしょうか？

この記事では、プログラミング初心者にもわかりやすく、オーバーロードの基本や必要性、使いどころをやさしく解説していきます。

オーバーロードとは？

関数のオーバーロード（overload）とは、同じ関数名で引数の「型」や「数」を変えて複数の使い方ができる仕組みです。

🔰 かんたんに言うと…
「同じ名前の関数なのに、引数によって動きが変わる」ってこと！

なんで必要なの？

JavaScriptやTypeScriptでは、関数は引数の数や型が違っても、1つの関数で処理することが多いです。

ただし、これだと…

• 書いている人にしか意味が分からない
• 型の安全性が保たれない（バグが起きやすい）

という問題があります。

TypeScriptではオーバーロードを使うことで、

• 複数の使い方を分かりやすく定義できる
• 型によって処理を切り分けられる
• エディタの補完も正確になる（開発効率アップ）

といったメリットがあります！

実際の例で理解しよう！

たとえば、日付をフォーマットする関数を考えてみましょう。

// オーバーロードの定義（2パターンの引数）
function formatDate(date: Date): string;
function formatDate(date: string): string;

// 実際の関数の中身（共通処理）
function formatDate(date: Date | string): string {
  if (typeof date === "string") {
    return new Date(date).toLocaleDateString();
  } else {
    return `今日の日付は ${date.toLocaleDateString()}`;
  }
}

// 使い方① Date型を渡す
console.log(formatDate(new Date()));

// 使い方② 文字列を渡す
console.log(formatDate("2025-03-25"));

ポイント解説

• 同じ関数名 formatDate を使っている
• でも、引数が Date型 と string型 で違う
• どちらも正しく処理される
• TypeScriptが型チェックしてくれるので安心！

オーバーロードが役立つ場面

オーバーロードは次のような場面で役立ちます。

別の例：型によって戻り値を変える

function processValue(value: number): string;
function processValue(value: string): number;

function processValue(value: number | string): string | number {
  if (typeof value === "number") {
    return `数値: ${value}`;
  } else {
    return value.length; // 文字数を返す
  }
}

console.log(processValue(123)); // "数値: 123"
console.log(processValue("Hello")); // 5

解説

• number を渡したら「文字列」を返す
• string を渡したら「数字（長さ）」を返す
• 型によって戻り値も変えられる

オーバーロードのまとめ

最後に

オーバーロードは最初は少しややこしく見えるかもしれませんが、「同じ関数をいろんな型に対応させる便利な仕組み」だと思ってください。

型ごとに細かい処理を切り替えたり、柔軟な関数を作りたいときに大活躍します。