関数をマスターする (5/5)
作成:2016-04-29 09:53
更新:2016-04-29 09:53
更新:2016-04-29 09:53
■関数のオーバーロード
ジェネリックは、さまざまなタイプの値を扱えるようにするために役立ちます。が、先程の例のように、「numberとstringだけ対応し、それ以外は無視」というような場合は、あまりジェネリクスの利点がありません。
こうした場合、別のアプローチも検討できます。それは「オーバーロード」と呼ばれるものです。オーバーロードは、引数や返値の異なる同じ名前の関数を複数宣言できる機能です。
先程の例なら、引数がnumberのaddItemsと、stringのaddItemsをそれぞれ用意できるのです。この関数を呼び出す際には、引数に用意した値のタイプを元に自動的に適合する関数宣言がチェックされ、オーバーロードしていないタイプを指定するとコンパイルエラーになります。
このオーバーロードは以下のように記述します。
ここでは返値は省略しましたが、返値についても異なるタイプのものをオーバーロードできます。引数の異なる関数宣言を複数用意した後、引数のタイプにanyを指定した関数に実際の処理を実装します。anyは、「どんなタイプでもOK」ということを示すタイプです。
では、先ほどのサンプルを、オーバーロード利用の形になおしてみましょう。下にリストを掲載しておきます。ここでは、以下のように２つの関数宣言を用意してあります。
可変引数argに、number配列とstring配列をそれぞれ指定したものを用意しています。そして実際の実装は、<any>を指定して行っています。実装を用意するのはこの１つだけでOKです。
このオーバーロードとジェネリックをうまく使い分けることで、さまざまなタイプの引数に対応した関数を作れるようになりますね！
こうした場合、別のアプローチも検討できます。それは「オーバーロード」と呼ばれるものです。オーバーロードは、引数や返値の異なる同じ名前の関数を複数宣言できる機能です。
先程の例なら、引数がnumberのaddItemsと、stringのaddItemsをそれぞれ用意できるのです。この関数を呼び出す際には、引数に用意した値のタイプを元に自動的に適合する関数宣言がチェックされ、オーバーロードしていないタイプを指定するとコンパイルエラーになります。
このオーバーロードは以下のように記述します。
function 関数 (…引数の指定1…);
function 関数 (…引数の指定2…);
……必要なだけ宣言……
function 関数 ( 引数 : any){
……実行する処理……
}
ここでは返値は省略しましたが、返値についても異なるタイプのものをオーバーロードできます。引数の異なる関数宣言を複数用意した後、引数のタイプにanyを指定した関数に実際の処理を実装します。anyは、「どんなタイプでもOK」ということを示すタイプです。
では、先ほどのサンプルを、オーバーロード利用の形になおしてみましょう。下にリストを掲載しておきます。ここでは、以下のように２つの関数宣言を用意してあります。
function addItems(...arg:Array<number>): number;
function addItems(...arg:Array<string>): string;
可変引数argに、number配列とstring配列をそれぞれ指定したものを用意しています。そして実際の実装は、<any>を指定して行っています。実装を用意するのはこの１つだけでOKです。
このオーバーロードとジェネリックをうまく使い分けることで、さまざまなタイプの引数に対応した関数を作れるようになりますね！
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function addItems(...arg:Array<number>): number;
function addItems(...arg:Array<string>): string;
function addItems(...arg:Array<any>): any {
let res;
switch(typeof arg[0]){
case 'number':
res = 0;
break;
case 'string':
res = ''
break;
default:
return null;
}
for(let i = 0;i < arg.length;i++){
res += arg[i];
}
return res;
}
let out1:string = addItems("One", "Two", "Three");
document.write(out1);
document.write('<br>');
let out2:number = addItems(1, 2, 3, 4, 5);
document.write(out2.toString());
document.write('<br>');
let out3:boolean = addItems(true, false); // ※これはダメ！
document.write(out3.toString());
※関連コンテンツ