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

関数定義 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); // => エラー

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 732, today: 1, yesterday: 0
初版日時: 2016-03-18 (金) 22:29:54
最終更新: 2016-03-19 (土) 12:54:06 (JST) (609d) by njf
広告

ログイン

ユーザー名:


パスワード:





パスワード紛失


NJF