Ad

公式ページも参照のこと。

関数定義 anchor.png Edit

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

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

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

関数型 anchor.png Edit

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

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

オプション引数とデフォルト引数 anchor.png Edit

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

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
Page Top

可変引数 anchor.png Edit

「...」(ドット3つ)で引数の数を変更できる可変引数も使える。

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

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

ラムダ式とthis anchor.png Edit

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

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

Page Top

オーバーライド anchor.png Edit

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

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

Front page   Edit Freeze Diff Backup Upload Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 1990, today: 1, yesterday: 0
Princeps date: 2016-03-18 (Fri) 13:29:54
Last-modified: 2016-03-19 (Sat) 03:54:06 (JST) (2332d) by njf
MenuBar
広告

ログイン

ユーザー名:


パスワード:





パスワード紛失

Portuguese | English | German | Greek | Japanese | Korean | Russian | T-Chinese top
NJF