吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】引数について

2014年10月11日 / category : typescript

引数について、まとめてみます。

引数を省略可能にする

TypeScript
var A = (a:number, b:number) => a + b;
console.log( A(10,5) );

赤い箇所が、引数です。はい。
ちなみに、’15′が出力されます。10+5ですね。
例えば、引数bを設定しなかった場合、引数bには0が代入されるようにしたいとします。
引数bを省略したいわけです。

console.log( A(10) );

これを実行すると、’10′が出力される、みたいな。10+0ですね。
とりあえず、引数bがundefinedだったら、0を代入する、というコードを関数Aに追加します。

TypeScript
var A = (a:number, b:number) => {
	if( b === undefined ) b = 0;
	return a + b;
}
console.log( A(10) ); //コンパイルエラー

こんな感じ。はい。
これで、

console.log( A(10) );

を実行すると、コンパイルエラーになります。
引数bの設定がないよ~、ってことですね。

そこで、どうするか。

TypeScript
var A = (a:number, b?:number) => {
	if( b === undefined ) b = 0;
	return a + b;
}
console.log( A(10) );

引数bの後ろに「?」を追加します。

これで、コンパイルエラーにならず、’10′が出力されます。10+0ですね。

ちなみに、次のコードを見てみてください。

TypeScript
var A = (a:number, b:number) => {
	if( b === undefined ) b = 0;
	return a + b;
}

var B = (a:number, b?:number) => {
	if( b === undefined ) b = 0;
	return a + b;
}

関数Aと関数B、違いは引数bの後ろに「?」があるかないかです。
これを、コンパイルし、書き出させれるJavaScriptのコードは次のようになります。

JavaScript
var A = function (a, b) {
    if (b === undefined)
        b = 0;
    return a + b;
};

var B = function (a, b) {
    if (b === undefined)
        b = 0;
    return a + b;
};

関数Aと関数B、同じコードになります。
ですので、当然、書き出されたJavaScript側で

console.log( A(10) );
console.log( B(10) );

を実行しても、問題なく両方とも’10′が出力されます。
TypeScriptでは、厳密化しましょう。ってことですね。

引数を省略可能にしたい場合は、引数の後ろに「?」を付ける!

と、、、補足です。

TypeScript
var A = (a:number, b?:number, c:number) => a + b + c;
console.log( A(10,5,2) );

上のコードのように、省略可能な引数の後に、省略不可能な引数を設定することはできません。

引数に初期値を設定する

引数に初期値を設定することができます。

TypeScript
var A = (a:number, b:number) => a + b;
console.log( A(10, 5) );

この例では、’15′が出力されます。
引数bに初期値5を設定したい場合、次のようにします。

TypeScript
var A = (a:number, b:number=5) => a + b;
console.log( A(10) ); //15が出力
console.log( A(10, 10) ); //20が出力

これで、引数bを設定しなかった場合は、引数bには5が代入されることになります。
もちろん、引数bに初期値以外の数値を入れれば、そちらが優先されることになります。

引数の初期値設定に関しても、次のような設定はできません。

TypeScript
var A = (a:number=5, b:number) => a + b; //コンパイルエラー
console.log( A(10) );

初期設定をした引数の後ろに初期設定していない引数を設定することはできません。

引数の数を変更する

引数の型指定を配列にし、頭に’…’を付けることで、引数の数を制限することなく、自由に変更することができます。

TypeScript
var A = (...a:number[]) => a;
console.log( A(1, 10, 100, 1000) );

var B = (...b:string[]) => b;
console.log( B('a', 'b', 'c', 'd') );

var C = (...c:any[]) => c;
console.log( C(1, 'a', 10, 'b', 100, 'c', 1000, 'd') );

出力はそれぞれ

[1, 10, 100, 1000]
["a", "b", "c", "d"]
[1, "a", 10, "b", 100, "c", 1000, "d"]

こんな感じ。はい。
配列になっています。

次に色々試してみた例を挙げてみます。

TypeScript
//型指定をしない
var D = (...d) => d;
console.log( D(1, 'a', 10, 'b', 100, 'c', 1000, 'd') );

//引数 + ...引数
var E = (a:number, ...b:string[]) => 'a : ' + a + ' / b :' + b;
console.log( E(1, 'a', 'b', 'c', 'd') );

//...引数 + 引数 (コンパイルエラー)
var F = (...a:string[], b:number) => 'a : ' + a + ' / b :' + b;
console.log( F('a', 'b', 'c', 'd', 1) );

//...引数 + ...引数 (コンパイルエラー)
var G = (...a:number[], ...b:string[]) => 'a : ' + a + ' / b :' + b;
console.log( G(1, 10, 100, 'a', 'b', 'c', 'd') );

こんな感じです。はい。

引数でこんなこともできちゃう。

TypeScript
var A = (a:number, b:number=a) => a + b;
console.log( A(5) );

’10′
が出力されます。
引数bの初期値に引数aを代入しています。
こんなのもありなんですね。

ということは、次のも・・・可能なんです。

TypeScript
var A = (a:number, b:number = B()) => a + b;
var B = () => 50;
console.log( A(5) );

’55′
が出力されます。
引数bに関数Bの返り値を代入しています。
関数Bの返り値は50なので、5+50で、’55′みたいな。

ということは、次のも・・・可能なんです。

TypeScript
var C = (a:number, b:number = D()) => a + b;
var D = (a:number=10, b:number=10) => a + b;
console.log( C(5) );

’25′
が出力されます。
引数bに関数Dの返り値を代入しています。
その関数Dの引数には初期値を設定している。