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] |
| | + | |
| | + | 「...」（ドット３つ）で引数の数を変更できる可変引数も使える。 |
| | + | |
| | + | 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); // => エラー |
下位
ページへ戻る
