TypeScriptにおける関数のオーバーロード

時々、渡されたパラメータに応じて戻り値の型が変わる関数があります。 TypeScriptでは、これに関数のオーバーロードを使用します。これは関数のさまざまなシグネチャのバリエーションを指定することを可能にします。

例を見てみましょう。文字列の文字を配列に分割する関数があるとします：

function splitStr(str: string): string[] {
	return str.split('');
}

また、数値の桁を配列に分割する関数があるとします：

function splitNum(num: number): number[] {
	let str: string = String(num);
	let arr: string[] = str.split('');
	
	return arr.map(elem => +elem);
}

両方の関数を一つに統合しましょう。新しい関数は、パラメータの型に応じて、数値の配列または文字列の配列を返す必要があります。

関数のさまざまなシグネチャを宣言するために、オーバーロードを使用します：

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	// 両方のシグネチャの実装
}

ここで関数の実装を書きます。そのコードでは、どのシグネチャが有効になったかを条件で判断し、それに応じて適切なコードを実行して適切な型の結果を返す必要があります：

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	if (typeof val === 'string') {
		return val.split('');
	} else {
		let str: string = String(val);
		let arr: string[] = str.split('');
		
		return arr.map((elem: string): number => +elem);
	}
}

他の言語とは異なり、TypeScriptのオーバーロードでは一つの関数が作成されます。同じ名前で異なるシグネチャを持つ複数の関数を作ることはできません。

DOM要素のテキストを取得または変更する関数を作成してください。それは次のように動作するはずです：

text('#elem', 'text'); // テキストを設定
text('#elem');         // 現在のテキストを取得