アロー関数の型｜コードで実践

関数そのものを表す型

これまでは引数と戻り値に別々に型を付けてきました。関数はまとめて 1 つの型としても書けます。

(title: string) => string

読み方は、文字列を 1 つ受け取って文字列を返す関数、です。矢印の左が引数、右が戻り値です。この形を関数型と呼びます。

変数に入れるときに使う

関数型が効くのは、関数を変数に入れるときです。変数の側に型を書きます。

const workLabel: (title: string, count: number) => string = (title, count) => {
  return title + "ほか" + count + "件";
};

注目してほしいのは、右側のアロー関数に型を書いていないことです。変数の型で引数が何なのかは決まっているので、TypeScript がそこから title は string、count は number だと決めてくれます。これを文脈からの型付けと呼びます。

書く場所を右に寄せることもできます。どちらも同じ意味です。

const workLabel = (title: string, count: number): string => {
  return title + "ほか" + count + "件";
};

左に寄せると、この変数に何が入るのかが名前のとなりで読めます。右に寄せると、関数の定義としてふつうに読めます。同じ形の関数を何度も入れ替える場所では左、1 回きりの定義なら右、と考えると迷いません。

型が合わない関数は入らない

変数に関数型を書いておくと、あとから別の関数を入れ直したときにも検査が働きます。

const workLabel: (title: string, count: number) => string = (title) => {
  return title.length;
};
// エラー Type 'number' is not assignable to type 'string'.

戻り値が数値になってしまったことが、代入した行で止まります。

手を動かす

演習では、ゆめさくの作品数を一行にまとめる関数を変数に入れます。アロー関数の側ではなく、変数の側に関数型を書いてください。引数の型は変数の型から決まるので、右側には書かないままで通ります。

アロー関数の型

関数そのものを表す型

変数に入れるときに使う

型が合わない関数は入らない

手を動かす

要件

入出力例

ヒント

メモ