関数そのものを受けわたす

01 / 05

関数の型は関数の見た目に似ている

関数も値のひとつだから、型がある。書き方は関数の見た目とそっくりで、かっこの中が引数の型、矢印の右が戻り値の型だよ。

下の bai は「数値を受け取って数値を返す関数」が入る変数だ。

const bai: (n: number) => number =  (n) => n * 2;console.log(bai(6));

実行結果

02 / 05

関数を引数として受け取る

引数の型に関数の型を書けば、関数を受け取る関数が作れる。JavaScript コースで書いたコールバックがこれだよ。

受け取った側は、その関数を呼ぶだけ。何を渡されるかは型が決めてくれている。

function tsukau(  s: string,  kazari: (s: string) => string): void {  console.log(kazari(s));}tsukau("あめ", (s) => "-" + s + "-");

実行結果

-あめ-

03 / 05

`type` で関数の型に名前をつける

同じ関数の型を何度も書くのはつらい。章2で使った type は、関数の型にも使えるよ。

名前をつけると、引数の並びが短くなって読みやすくなる。

type Kazari = (s: string) => string;function tsukau(s: string, f: Kazari): void {  console.log(f(s));}tsukau("ゆき", (s) => "【" + s + "】");

実行結果

【ゆき】

04 / 05

形が合わない関数は入れられない

「文字列を受け取って文字列を返す」と宣言した場所に、数値を返す関数は入れられない。

下の s.length は数値だから、Kazari の約束を破っている。渡す前のこの行で止まってくれるよ。

type Kazari = (s: string) => string;const kazaru: Kazari = (s) => s.length;

実行結果

型のエラー: 型 'number' を型 'string' に割り当てることはできません。

05 / 05

返さない関数の型は `=> void`

表示するだけの関数を受け取るなら、矢印の右は void だよ。

覚えることは1つだけ。かっこの中が引数、矢印の右が戻り値。それじゃあ、関数を渡す練習をしてみよう。

type Shirase = (s: string) => void;function nagasu(  list: string[],  f: Shirase): void {  for (const s of list) {    f(s);  }}nagasu(["あさ", "よる"], (s) => {  console.log(s + "だよ");});

実行結果

あさだよ
よるだよ