公式ページも参照のこと。
TypeScriptの関数定義はJavaScriptと同様で型が指定できるだけである。
function testFunc(x:number,y:number):number{ return x + y; } console.log(testFunc(2,4)); // => 6
無名関数を変数に入れるときには注意が必要となる。
var testFunc = function(x:number,y:number):number{ return x + y; } testFunc = function(x:number,y:number,z:number):number{ //エラー return x + y + z; }
ここで2度目の代入でエラーとなるのは、一度目の代入の型推論で、testFuncは二つのnumber型引数とnumber型戻り値を持つ型と判断されるためである。つまり、TypeScriptは引数や戻り値まで区別した関数の型を持つ。
そのような関数の型を明示することもできる。
var testFunc:(x:number,y:number)=>number = function(x:number,y:number):number{ return x + y; } var test2Func:(x:number,y:number,z:number)=>number; test2Func = function(x:number,y:number,z:number):number{ return x + y + z; }
これで無名関数をより厳密に扱うことができる。
また、このように明示的に関数の型を扱うときには、右辺の型は省略できる。
var testFunc:(x:number,y:number)=>number = function(x,y){ return x + y; }
関数の引数に「?」をつけると引数を省略できるオプション引数にできる。
function testFunc(x:number,y?:number){ if(y){ return x + y; } return x; } console.log(testFunc(1)); // => 1 console.log(testFunc(1,2)); // => 3
引数に「=」をつけるとデフォルト引数が指定できる。
function testFunc(x:number,y:number = 10){ return x + y; } console.log(testFunc(1)); // => 11 console.log(testFunc(1,2)); // => 3
「...」(ドット3つ)で引数の数を変更できる可変引数も使える。
function testFunc(...a:string[]):string{ return a.join(","); } console.log(testFunc("one","two","three","four")) // => one,two,three,four
ラムダ式は「=>」で定義する
console.log(((x:number,y:number)=>{return x + y;})(1,2)); // => 3
ラムダ式は「this」の扱いがより直観的になるというメリットがある。まず、
var wrapper = { x:2, whatisx:function () { return function(){ return this.x; } } }; var w = wrapper.whatisx(); console.log(w()); // => undefined
すると実行結果は「undefined」となる。これは実行時に「this」が定義時と異なるからである。これを
var wrapper = { x:2, whatisx:function () { return () => { return this.x; } } }; var w = wrapper.whatisx(); console.log(w()); // => 2
こちらは直感通り「2」となる。
関数の定義を並べると変数や戻り値の型や個数を変えるオーバーライドも可能。
function testFunc(x:number):number; function testFunc(x:string):string; function testFunc(x:number,y:number):number; function testFunc(x:any,y:number = 1):any{ if(typeof x == "number"){ return x + y; }else if(typeof x == "string"){ return "string:" + x; } } console.log(testFunc(2)); // => 3 console.log(testFunc(2,4)); // => 6 console.log(testFunc("test")); // => "string:test" testFunc(true); // => エラー