関数の型

引数と戻り値に注釈を書く。それは最初の章からやってきました。この章はその先です。関数そのものを型として書く。これができると、「関数を受け取る関数」「関数を入れる変数」に型がつけられるようになり、mapやfilterの中で起きていたことの種明かしもつきます。

関数型

関数の形は、"(引数) => 戻り値" の形で型として書けます。

type Calculator = (a: number, b: number) => number;

const add: Calculator = (a, b) => a + b;
const multiply: Calculator = (a, b) => a * b;

"Calculator" は「numberを2つ受けてnumberを返す関数」という関数の型です。注目してほしいのは、addとmultiplyの実装で引数に型注釈を書いていないこと。変数側に ": Calculator" と宣言したので、TypeScriptが「aとbはnumberだ」と逆算してくれます(文脈からの推論)。型を一箇所に書けば、実装側は身軽になる、というわけです。

読み方の注意をひとつ。アロー関数の実装と関数型は、同じ "=>" を使うので初見は混乱します:

//        ↓これは「型」の中の =>(戻り値の型を指す)
type Fn = (n: number) => string;

//            ↓これは「実装」の =>(処理本体を指す)
const fn: Fn = (n) => `No.${n}`;

「型の中の => は戻り値、実装の => は本体」。この区別がつけば、関数型は読めたも同然です。

コールバックの型

関数型の一番の使いどころは、引数として関数を受け取るときです。