関数のTS化｜コードで実践 - ゆめさくコード

次はユーティリティ関数

データ層が終わったので、次はそれを加工する関数群です。整形したり数えたりする小さな関数が集まったファイルで、画面のことは知りません。

ここでやることも同じです。引数に型を付ける、外へ出す値に型を付ける、出たエラーを読む、の順です。

変数に入れた関数には関数型を書く

ユーティリティのファイルには、アロー関数を変数に入れた書き方がよく出てきます。

const withBrackets = (title) => "「" + title + "」";

これを移すと、引数の title が any になってエラーです。書き方は 2 通りあります。

// 引数と戻り値に直接付ける
const withBrackets = (title: string): string => "「" + title + "」";

// 変数のほうに関数型を付ける
type Formatter = (title: string) => string;
const withBrackets: Formatter = (title) => "「" + title + "」";

下の書き方だと、アロー関数の中に型を書かなくても title が string だと分かります。変数の型から中身へ型が流れているからです。同じ形の関数がいくつも並ぶファイルでは、こちらのほうが短くなります。

配列メソッドは型が勝手に付いてくる

第3章で見たとおり、map や filter に渡すコールバックの引数には型を書きません。

const titles: string[] = ["プロフィールサイト", "自己紹介カード"];
const decorated = titles.map(withBrackets);
// decorated は string[]

titles が string[] なので、map は「string を受け取る関数」しか受け付けません。関数の側を先に型付けしておくと、こういう組み合わせの間違いも止まります。

const counts: number[] = [1, 2, 3];
counts.map(withBrackets);
// エラー Argument of type 'Formatter' is not assignable to ...

数え間違いは型では止まらない

注意しておきたいのは、型が守るのは形だけだ、ということです。

function restCount(titles: string[], max: number): number {
  return titles.length - max;
}

この関数は、max のほうが大きいとマイナスを返します。型としては何も間違っていないので、tsc は黙っています。

移行のときは、型エラーが消えた時点で終わりにしないでください。型が消してくれるのは打ち間違いと形の不一致で、数の扱いは自分で確かめる必要があります。

手を動かす

演習では、作品タイトルの一覧を表示用の一行に整える関数を移行します。アロー関数のほうにも型が要ることに注意してください。件数がはみ出したときの扱いも、自分で確かめながら書きます。

関数のTS化

次はユーティリティ関数

変数に入れた関数には関数型を書く

配列メソッドは型が勝手に付いてくる

数え間違いは型では止まらない

手を動かす

要件

入出力例

ヒント

メモ