1: 2016-03-18 (金) 13:29:54 njf[6] [7] [8] | 2: 2016-03-18 (金) 16:04:21 njf[6] [9] [10] | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | [[公式ページ:http://www.typescriptlang.org/Handbook]]も参照のこと。 | ||
+ | |||
+ | *関数定義 [#v50d750e] | ||
TypeScriptの関数定義はJavaScriptと同様で型が指定できるだけである。 | TypeScriptの関数定義はJavaScriptと同様で型が指定できるだけである。 | ||
Line 6: | Line 9: | ||
console.log(testFunc(2,4)); // => 6 | 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:any):any{ | ||
+ | if(typeof x == "number"){ | ||
+ | return x; | ||
+ | }else if(typeof x == "string"){ | ||
+ | return "string:" + x; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | console.log(testFunc(2)); // => 2 | ||
+ | console.log(testFunc("test")); // => "string:test" | ||
+ | testFunc(true); // => エラー |
(This host) = https://njf.jp