TypeScriptで、関数を型にする

TOC

  1. どんなときにつかうの?
    1. コールバック引数を使いたい
    2. 関数を配列とする
  2. AddEventListenerの引数にも!

Typescriptの型として、

「number」「string」「boolean」などとありますが、

実は、関数も型にできます!

1
var function1:(arg1:number, arg2:string)=>boolean;

こんな感じ。

1
(引数名:型, 引数名:型 .....)=>戻り値

戻り値がないときは、voidを指定できます。

どんなときにつかうの?

コールバック引数を使いたい

1
2
3
4
5
6
7
function progressA(callback: (msg:string)=>void) {
callback("hoge");
}

progressA((msg) => {
console.log(msg);
});

関数を配列とする

1
2
3
4
5
6
7
8
9
10
11
var fnArray:Array<(msg:string)=>void> = [];
fnArray.push((msg) => {
alert(msg);
});
fnArray.push((msg) => {
console.log(msg);
});
fnArray.forEach(i => {
// 関数だから呼び出せる
i("Hello, TypeScript!");
});

AddEventListenerの引数にも!

lib.d.tsを見てみると、

1
addEventListener(type: "click", listener: (ev: MouseEvent) => any, useCapture?: boolean): void;

引数listenerの型にも使われています!

TypeScript楽しい!奥深い!