Posted on by konamugi

TypeScriptの”=>”って何？

TypeScriptのソースを読んでいるとたまに出てくる”=>”という演算子みたいなもの。たぶん演算子。これについて詳しく書かれているところ(簡単に検索でひっかかる情報)がなかったので簡単に纏めます。

“=>”はFunction Typeというものの一部。変数に対してstringとかnumberとか「型」を宣言しますが、”=>”は変数が関数であることを宣言するときに使用します。
冒頭で「たぶん演算子」とか言っておきながら全然演算子ではなかったです。また、関数型(と言ってよいですよね？)の一部であってこれだけで関数を示すものではありません。つまりどういうこと？ということを以下で説明。

#2015/01/03 に追記

1日おかないぐらいで加筆修正です。
Function Type(関数型)の場合以外でも用途があるようです。Arrow Function Expression(直訳すると「矢関数式」「矢印関数式」とか「アロー関数式」とか？)というので使用できます。が、この記事ではFunction Typeにのみ絞って説明します。

Arrow Function Expressionについては次の記事で説明します。

#追記ここまで

関数(function)は引数や戻り値があります。一重に関数と言っても引数の型や数、戻り値の型等々で形が異なります。TypeScriptでは異なる引数/戻り値の関数型を区別するために”=>”を用いた関数型の宣言する文法があります。

「百聞は一見にしかず」。簡単な例を見てみましょう。

// 関数型であるcalcFuncを宣言しました。
// calcFuncは引数にnumberを2つとり、
// 何らかの処理をした結果としてnumberを返す関数型として宣言。
var calcFunc: (x: number, y: number) => number;

calcFuncを関数型として宣言しました。コロンから後ろが関数型を表す文字列です。そうです「(x:number, y:number) => number」です。これは「引数にnumber2つとり戻り値としてnumberを返す関数型」ということを意味してします。やっとでてきましたね”=>”。

見ての通りですが、関数型は「引数部と戻り値部を”=>”でつなげたもの」になります。

ではcalcFuncに代入できるのはどういう関数でしょう？これも例を見た方が早いかと思います。

function add(a: number, b: number): number {
    return a + b;
}

function mul(a: number, b: number): number {
    return a * b;
}

function sub(a, b) {
    return a - b;
}

function cat(a: string, b: string): string {
    return a + b;
}

関数を4つ用意しました。

  • addは足し算をした結果を返します。
  • mulは掛け算をしてその値を返します。
  • subは引き算をして値を返しますが引数や戻り値の型を具体的に示していません。
  • catは引数の文字列をつなげた結果を返します。引数/戻り値ともにstringです。

これらをcalcFuncに代入するとこうなります。

calcFunc = add;  // OK
calcFunc = mul;  // OK
calcFunc = sub;  // OK
calcFunc = cat;  // エラー。型の変換ができない。

calcFuncは引数にnumberが2つ、戻り値がnumberの関数型であるのでaddとmulはOK。catはNGであることがよくわかります。
subは型を指定していないのでany型として扱われてるのでしょうか。代入はできました。(が、可読性やコードの品質面を考えると型は指定した方がよいですね。型の指定ができてこそのTypeScriptですし。)

長々と書きましたが、TypeScriptででてくる”=>”はFunction Type(関数型)を宣言する際に使用する引数と戻り値をを繋げる(もしくは引数と戻り値を区別するための)記号でした。

以下、参考にしたサイト。

では。

Related posts:

  1. TypeScriptの”=>”はFunction Type以外にArrow Function Expressionがある