コールバックの型｜コードで実践

関数を受け取る関数

filter や map は、関数を引数として受け取ります。渡される側の関数をコールバックと呼び、関数を受け取る側を高階関数と呼びます。

const titles: string[] = ["プロフィールサイト", "自己紹介カード", "ブログ"];

const short = titles.filter((title) => title.length <= 8);

ここで title に型を書いていないのにエラーになりません。titles が string[] だと分かっているので、その要素を受け取るコールバックの引数も string だと決まるからです。前のレッスンの文脈からの型付けが、ここでも働いています。

求められている形が決まっている

filter が求めるコールバックは (item: string) => boolean です。真偽値を返さないものを渡すと止まります。

const short = titles.filter((title) => title.length);
// エラー Type 'number' is not assignable to type 'boolean'.

map が求めるのは (item: string) => U で、返した型がそのまま新しい配列の要素の型になります。文字列を返せば string[]、数値を返せば number[] です。

const lengths: number[] = titles.map((title) => title.length);

名前を付けて切り出すときは自分で書く

コールバックをその場に書かず、名前の付いた関数として外へ出すこともあります。そのときは文脈が無いので、引数の型は自分で書きます。

function isShort(title: string): boolean {
  return title.length <= 8;
}

function withBullet(title: string): string {
  return "・" + title;
}

const list = titles.filter(isShort).map(withBullet);

型を書いておくと、filter に渡してよい関数かどうかを渡した行で確かめてもらえます。真偽値を返さない関数をうっかり渡せば、その行で止まります。名前を付けて切り出すほど、型注釈が効きます。

手を動かす

演習では、ゆめさくの作品タイトルから短いものだけを選んで箇条書きにします。filter と map に渡す関数は名前を付けて外に出してあります。その 2 つに型を付けてください。

コールバックの型

関数を受け取る関数

求められている形が決まっている

名前を付けて切り出すときは自分で書く

手を動かす

要件

入出力例

ヒント

メモ