11. 関数型の書き方 — (x: number) => string

「関数そのもの」にも型があります。(value: number) => string と書くと「number を1つ受け取り string を返す関数」という型になり、矢印の左に引数、右に戻り値の型を並べます。

実務でこれが活躍するのは、関数を引数として受け取る場面です。コールバックの引数に関数型を書いておけば、渡す関数の引数や戻り値が違っていた時点でエラーになり、コールバックの取り違えを防げます。

つまずきポイントは矢印関数(アロー関数)の構文と見た目が似ていることです。値の世界の => は関数の実装、型の世界の => は「こういう関数である」という形の宣言、と区別して読みましょう。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// 変数 toYen の型は「number を受け取り string を返す関数」
const toYen: (value: number) => string = function (value) {
  return value + "円";
};

// 関数を引数として受け取るときに使うことが多い
function printPrice(price: number, format: (value: number) => string): void {
  console.log(format(price));
}

printPrice(480, toYen);
printPrice(1200, function (value) {
  return "$" + (value / 100).toFixed(2);
});

公式ドキュメントで詳しく ↗