TypeScript 関数オーバーロード

概要: このチュートリアルでは、TypeScript の関数オーバーロードについて学びます。

TypeScript の関数オーバーロードの概要

関数オーバーロードにより、1 つの関数に対して複数のシグネチャを定義し、定義されたすべてのシグネチャを処理する 1 つの実装を提供できます。

関数オーバーロードにより、関数はさまざまなタイプの引数を処理できます。さらに、TypeScript コンパイラは、関数シグネチャを使用して、コンパイル時の型チェックを実行し、型の安全性を保証します。

TypeScript 関数オーバーロードは、Java などの静的型付け言語がサポートする関数オーバーロードとは異なります。

TypeScript 関数オーバーロードの例

2 つの数値または文字列の合計を返す単純な関数から始めましょう。

最初に、オーバーロードされたシグネチャを定義します。

function add(a: number, b: number): number;
function add(a: string, b: string): string;Code language: TypeScript (typescript)

次に、add 関数の実装を提供します。

function add(a: any, b: any): any {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else if (typeof a === 'string' && typeof b === 'string') {
        return a + b;
    }
    throw new Error('Invalid arguments');
}Code language: TypeScript (typescript)

3 番目に、オーバーロードされた関数を使用します。

console.log(add(10, 20));  // 30
console.log(add('Hello, ', 'world!'));  // 'Hello, world!Code language: JavaScript (javascript)

オプションのパラメーターを備えた関数オーバーロード

関数をオーバーロードすると、必須パラメーターの数が同じである必要があります。一方のオーバーロードが他方のオーバーロードよりもパラメーターが多い場合、追加のパラメーターをオプションにする必要があります。例えば

function sum(a: number, b: number): number;
function sum(a: number, b: number, c: number): number;
function sum(a: number, b: number, c?: number): number {
    if (c) return a + b + c;
    return a + b;
}
Code language: TypeScript (typescript)

sum() 関数は 2 つまたは 3 つの数値を受け入れます。3 番目のパラメーターはオプションです。オプションにしないと、エラーが発生します。

メソッドオーバーロード

関数がクラスのプロパティの場合、メソッドと呼ばれます。TypeScript もメソッドオーバーロードをサポートしています。例えば

class Counter {
  private current = 0;
  count(): number;
  count(target: number): number[];
  count(target?: number): number | number[] {
    if (target) {
      let values: number[] = [];
      for (let start = this.current; start <= target; start++) {
        values.push(start);
      }
      // set current to target
      this.current = target;
      return values;
    }
    return ++this.current;
  }
}
Code language: TypeScript (typescript)

count() 関数は、渡した引数の数に応じて数値または配列を返すことができます

let counter = new Counter();

console.log(counter.count()); // return a number
console.log(counter.count(5)); // return an arrayCode language: TypeScript (typescript)

出力

1
[ 1, 2, 3, 4, 5 ]Code language: JSON / JSON with Comments (json)

概要

• 関数オーバーロードを使用して、単一の関数に対して複数のシグネチャを定義し、型の安全性を保証します。