関数のTS化
次はユーティリティ関数
データ層が終わったので、次はそれを加工する関数群です。整形したり数えたりする小さな関数が集まったファイルで、画面のことは知りません。
ここでやることも同じです。引数に型を付ける、外へ出す値に型を付ける、出たエラーを読む、の順です。
変数に入れた関数には関数型を書く
ユーティリティのファイルには、アロー関数を変数に入れた書き方がよく出てきます。
JavaScript
const withBrackets = (title) => "「" + title + "」";これを移すと、引数の title が any になってエラーです。書き方は 2 通りあります。
TypeScript
// 引数と戻り値に直接付ける
const withBrackets = (title: string): string => "「" + title + "」";
// 変数のほうに関数型を付ける
type Formatter = (title: string) => string;
const withBrackets: Formatter = (title) => "「" + title + "」";下の書き方だと、アロー関数の中に型を書かなくても title が string だと分かります。変数の型から中身へ型が流れているからです。同じ形の関数がいくつも並ぶファイルでは、こちらのほうが短くなります。
配列メソッドは型が勝手に付いてくる
第3章で見たとおり、map や filter に渡すコールバックの引数には型を書きません。
TypeScript
const titles: string[] = ["プロフィールサイト", "自己紹介カード"];
const decorated = titles.map(withBrackets);
// decorated は string[]titles が string[] なので、map は「string を受け取る関数」しか受け付けません。関数の側を先に型付けしておくと、こういう組み合わせの間違いも止まります。
TypeScript
const counts: number[] = [1, 2, 3];
counts.map(withBrackets);
// エラー Argument of type 'Formatter' is not assignable to ...数え間違いは型では止まらない
注意しておきたいのは、型が守るのは形だけだ、ということです。
TypeScript
function restCount(titles: string[], max: number): number {
return titles.length - max;
}この関数は、max のほうが大きいとマイナスを返します。型としては何も間違っていないので、tsc は黙っています。
移行のときは、型エラーが消えた時点で終わりにしないでください。型が消してくれるのは打ち間違いと形の不一致で、数の扱いは自分で確かめる必要があります。
手を動かす
演習では、作品タイトルの一覧を表示用の一行に整える関数を移行します。アロー関数のほうにも型が要ることに注意してください。件数がはみ出したときの扱いも、自分で確かめながら書きます。
要件
withBracketsの引数に型を付けるformatWorkListの引数と戻り値に型を付ける- 並べるタイトルはかぎカッコで囲み、読点でつなぐ
maxを超えた分だけほかN件を末尾に足す- 処理の中身は変えない
入出力例
formatWorkList(["プロフィールサイト","自己紹介カード","スキル一覧の表"], 2) → "「プロフィールサイト」、「自己紹介カード」ほか1件"
formatWorkList(["プロフィールサイト"], 2) → "「プロフィールサイト」"
formatWorkList(["プロフィールサイト","自己紹介カード"], 2) → "「プロフィールサイト」、「自己紹介カード」"
formatWorkList([], 2) → ""
formatWorkList(["プロフィールサイト","自己紹介カード","スキル一覧の表"], 1) → "「プロフィールサイト」ほか2件"ヒント
編集 ゆめさく編集部