関数定義 [TypeScriptの関数]

印刷

ページ内コンテンツ

関数定義
関数型
オプション引数とデフォルト引数
可変引数
ラムダ式とthis
オーバーライド

関数定義 ^[2] ^[3]

TypeScript^[4]の関数定義はJavaScript^[5]と同様で型が指定できるだけである。

function testFunc(x:number,y:number):number{
    return x + y;
}

console.log(testFunc(2,4)); // => 6

関数型 ^[6] ^[7]

無名関数を変数に入れるときには注意が必要となる。

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^[4]は引数や戻り値まで区別した関数の型を持つ。

そのような関数の型を明示することもできる。

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;
}

オプション引数とデフォルト引数 ^[8] ^[9]

関数の引数に「?」をつけると引数を省略できるオプション引数にできる。

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

可変引数 ^[10] ^[11]

「...」（ドット３つ）で引数の数を変更できる可変引数も使える。

function testFunc(...a:string[]):string{
    return a.join(",");
}

console.log(testFunc("one","two","three","four")) // => one,two,three,four

ラムダ式とthis ^[12] ^[13]

ラムダ式は「=>」で定義する

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」となる。

オーバーライド ^[14] ^[15]

関数の定義を並べると変数や戻り値の型や個数を変えるオーバーライドも可能。

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); // => エラー

Last-modified: 2016-03-19 (土) 03:54:06 (JST) (2953d) by njf

Links list

(This host) = https://njf.jp

http://www.typescriptlang.org/Handbook
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AE%E9%96%A2%E6%95%B0#v50d750e
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AE%E9%96%A2%E6%95%B0&paraid=v50d750e
^{(This host)}/cms/modules/xpwiki/?TypeScript
^{(This host)}/cms/modules/xpwiki/?JavaScript
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AE%E9%96%A2%E6%95%B0#ue8e9075
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AE%E9%96%A2%E6%95%B0&paraid=ue8e9075
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AE%E9%96%A2%E6%95%B0#cf68938f
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AE%E9%96%A2%E6%95%B0&paraid=cf68938f
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AE%E9%96%A2%E6%95%B0#mcb8cf90
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AE%E9%96%A2%E6%95%B0&paraid=mcb8cf90
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AE%E9%96%A2%E6%95%B0#medb6995
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AE%E9%96%A2%E6%95%B0&paraid=medb6995
^{(This host)}/cms/modules/xpwiki/?TypeScript%E3%81%AE%E9%96%A2%E6%95%B0#da6d0324
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TypeScript%E3%81%AE%E9%96%A2%E6%95%B0&paraid=da6d0324

TypeScriptの関数 :: NJF Wiki

関数定義 [2] [3]

関数型 [6] [7]

オプション引数とデフォルト引数 [8] [9]

可変引数 [10] [11]

ラムダ式とthis [12] [13]