TypeScriptの関数オーバーロードを徹底解説！初心者でもわかる使い方

1. 関数オーバーロードとは？

1. 関数オーバーロードとは？

TypeScriptの関数オーバーロードとは、同じ名前の関数を複数の形で定義し、呼び出すときの引数の種類や数に応じて処理を切り替える仕組みです。日本語で言うと「同じ名前の関数だけど、使い方によって違う動きをする関数」を作れるということです。

例えば、数字を渡したときは計算をして、文字列を渡したときは文字の処理をするといったように、1つの関数名でいろいろな処理をまとめることができます。

2. 関数オーバーロードの基本的な書き方

2. 関数オーバーロードの基本的な書き方

関数オーバーロードは、まず「呼び出しのパターン」を複数書いてから、最後に「実際の処理」を書くという流れで定義します。

書き方の流れは以下のようになります。

• ① 関数名を同じにして、引数や戻り値の型だけを変えて複数回書く
• ② 最後に、実際に動く関数の本体を1つだけ書く

// 呼び出しパターン（シグネチャ）を定義
function greet(name: string): string;
function greet(age: number): string;

// 実際の関数の処理
function greet(value: string | number): string {
    if (typeof value === "string") {
        return "こんにちは、" + value + "さん！";
    } else {
        return "あなたの年齢は " + value + " 歳ですね！";
    }
}

// 関数を呼び出す
console.log(greet("太郎"));
console.log(greet(25));

こんにちは、太郎さん！
あなたの年齢は 25 歳ですね！

この例では、greetという1つの関数が、文字列を受け取ったときと、数値を受け取ったときで違う動きをしています。これがオーバーロードの力です。

3. オーバーロードを使うメリット

3. オーバーロードを使うメリット

オーバーロードを使うことで、プログラムが読みやすく整理されるというメリットがあります。もしオーバーロードを使わないなら、「文字用の関数」「数字用の関数」と別々に名前を付ける必要があります。

しかしオーバーロードを使えば、同じ処理をまとめられるので「どの関数を呼べばいいのか迷う」ことがなくなります。

また、TypeScriptの型システムによって、呼び出すときに間違えた使い方をするとエラーで教えてくれるため、安心してプログラムを書けます。

4. 引数の数を変えるオーバーロード

4. 引数の数を変えるオーバーロード

オーバーロードは「引数の型」だけでなく「引数の数」によっても切り替えることができます。

// 2つのパターンを用意
function add(a: number, b: number): number;
function add(a: number, b: number, c: number): number;

// 実際の処理
function add(a: number, b: number, c?: number): number {
    if (c !== undefined) {
        return a + b + c;
    }
    return a + b;
}

// 呼び出し
console.log(add(2, 3));      // 5
console.log(add(2, 3, 4));   // 9

5
9

このように、同じ関数でも引数の数を変えて呼び出せるのがオーバーロードの便利なところです。

5. 文字列と数値の両方に対応する実用例

5. 文字列と数値の両方に対応する実用例

最後に、もう少し実用的な例を見てみましょう。たとえば「検索処理」を作る場合、検索キーワードを文字列で渡すこともあれば、ID番号で渡すこともあります。

function findUser(id: number): string;
function findUser(name: string): string;

function findUser(value: number | string): string {
    if (typeof value === "number") {
        return "ユーザーID " + value + " の情報を表示します。";
    } else {
        return "ユーザー名 " + value + " の情報を表示します。";
    }
}

console.log(findUser(101));
console.log(findUser("Hanako"));

ユーザーID 101 の情報を表示します。
ユーザー名 Hanako の情報を表示します。

このように、オーバーロードを使えば「ユーザー検索」という1つの目的の関数を、いろいろな使い方で呼べるようになります。コードが直感的でわかりやすくなり、間違いも減らせます。

まとめ

まとめ

TypeScriptの関数オーバーロードについて学んだ内容を振り返ると、ひとつの関数名で複数の処理パターンを柔軟に扱えるという点が大きな特徴でした。同じ関数名を維持しながら引数の型や数に応じて挙動を切り替えることで、コードの読みやすさや保守性が向上し、複雑な処理も自然とわかりやすくまとまります。特に、型安全性を保ちながら異なるデータを扱える点はTypeScriptならではの利点であり、開発者が実装時に迷うことを減らし、プログラムの意図がより明確になります。また、引数の型が多様なケースに適した関数設計を行うことで、同じ目的の処理をひとつのまとまった関数に集約できるのも魅力です。 さらに実用例では、検索処理や計算処理のような、現実的なシナリオでオーバーロードの効果が発揮されることを確認しました。数値や文字列といった異なる入力を統一的に扱い、処理内容を切り替えることで、プログラム全体の統合性を保ちながら入力の自由度を高めることができます。こうした構造は初心者にとっても理解しやすく、同時に実務でも広く使用される書き方です。また、TypeScript特有の型推論やエラー検知が動作するため、安全で正確なコードを書く助けにもなります。 以下には、今回学んだ内容を整理する目的でシンプルなサンプルコードをまとめています。実務的なケースでよく使われる「メッセージ生成処理」をオーバーロードで表現したものです。複数の引数バリエーションを持つ関数をどのように設計し、最終的にひとつの実装でまとめるかという流れに注目しながら読むと理解が深まります。

サンプルプログラム：メッセージ生成のオーバーロード

// 異なるパターンの呼び出しを定義
function createMessage(user: string): string;
function createMessage(user: string, status: string): string;

// 実際の処理
function createMessage(user: string, status?: string): string {
    if (status) {
        return "ユーザー「" + user + "」の現在の状態は「" + status + "」です。";
    }
    return "こんにちは、" + user + "さん。ご利用ありがとうございます。";
}

// 実行例
console.log(createMessage("太郎"));
console.log(createMessage("花子", "オンライン"));

このように、引数の数によって処理が自然に分岐し、ひとつの関数名によってユーザー向けのメッセージ生成を統一的に扱えます。実務でメッセージ処理やログ生成を行う際にも応用しやすく、コードの構造を簡潔に保ちながら機能を拡張できます。関数オーバーロードは、実装の自由度を広げながらプログラム全体の整合性を高めてくれる便利な技法です。