1: 2016-03-18 (金) 13:29:54 njf |
現: 2016-03-19 (土) 11:54:06 njf |
| + | [[公式ページ:http://www.typescriptlang.org/Handbook]]も参照のこと。 |
| + | |
| + | *関数定義 [#v50d750e] |
| TypeScriptの関数定義はJavaScriptと同様で型が指定できるだけである。 | | TypeScriptの関数定義はJavaScriptと同様で型が指定できるだけである。 |
| | | |
| return x + y; | | return x + y; |
| } | | } |
| + | |
| + | console.log(testFunc(2,4)); // => 6 |
| | | |
| + | *関数型 [#ue8e9075] |
| + | 無名関数を変数に入れるときには注意が必要となる。 |
| + | |
| + | 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; |
| + | } |
| + | |
| + | *オプション引数とデフォルト引数 [#cf68938f] |
| + | |
| + | 関数の引数に「?」をつけると引数を省略できるオプション引数にできる。 |
| + | |
| + | 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 |
| + | |
| + | *可変引数 [#mcb8cf90] |
| + | |
| + | 「...」(ドット3つ)で引数の数を変更できる可変引数も使える。 |
| + | |
| + | function testFunc(...a:string[]):string{ |
| + | return a.join(","); |
| + | } |
| + | |
| + | console.log(testFunc("one","two","three","four")) // => one,two,three,four |
| + | |
| + | *ラムダ式とthis [#medb6995] |
| + | |
| + | ラムダ式は「=>」で定義する |
| + | |
| + | 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」となる。 |
| + | |
| + | *オーバーライド [#da6d0324] |
| + | |
| + | 関数の定義を並べると変数や戻り値の型や個数を変えるオーバーライドも可能。 |
| + | |
| + | 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(2,4)); // => 6 |
| + | console.log(testFunc("test")); // => "string:test" |
| + | testFunc(true); // => エラー |