APIレスポンスに型を通せ

師範 / 目安 35分

凛さんが、fleama API のレスポンスを画面に貼りました。/items を叩くと、こういう形が返ってきます。

「いま、これを受け取る変数の型は any です」と凛さん。「res.data.itms と打ち間違えても、誰も止めません。通信の向こう側は、型の空白地帯になっています」

通信の戻りは、確かに外の世界から来ます。しかし「何が返ってくるか分からない」のと「何が返ってくるか書いていない」のは別のことです。API の形は決まっています。決まっているものは書ける。書けば、その形からずれた読み方は全部コンパイラが弾いてくれます。

この形を型にするコツは、外側から内側へ、層ごとに分けることです。1つの巨大な interface に全部詰め込むと、読めないうえに再利用もできません。出品者は Seller、商品1件は Item、data の中身は ItemsData、いちばん外側が ItemsResponse です。Item の中に seller: Seller と書けば、入れ子はそのまま入れ子で表現できます。

凛さんが最後に釘を刺します。「as は使わないでください。as は『コンパイラより自分のほうが正しい』という宣言です。ときには必要ですが、形が分かっているレスポンスに使うのは、ただの手抜きです。型は宣言して通すもので、押し通すものではありません」

完成条件

この問題では通信そのものは行いません。レスポンスを引数で受け取った状態から始めます。

まず、上に貼ったレスポンスの形を4つの interface に分けて定義してください。

• Seller — id (number) と name (string)
• Item — id (number)、name (string)、price (number)、seller (Seller)
• ItemsData — total (number) と items (Item[])
• ItemsResponse — status (string) と data (ItemsData)

そのうえで pickItems という関数を定義してください。引数は ItemsResponse を1つだけ受け取り、次の形の文字列を返します。

組み立ての決まりは次のとおりです。

• 全 に total の値、件中 に 配列に入っている件数 を続け、件 で閉じます
• 区切りは半角スペースを挟んだ / です
• 商品1件は 商品名(出品者名) 価格円 の形にします。商品名と丸括弧のあいだにスペースは入れません
• 商品どうしは , (カンマと半角スペース) でつなぎます
• items が空のときは、うしろ側を 該当なし にします。例えば 全0件中0件 / 該当なし です

any と as は使わないでください。as を使っていないことは自動判定では測りませんが、凛さんの CI は人の目でも回っています。

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

開かずに10分粘って進まないなら、①だけ開けてください。粘る時間そのものには価値がありません。価値があるのは、自分で書いた行が動いた瞬間です。

型を書き終えたら、response.data.items[0].seller.name まで補完が効くか確かめてください。エディタが最後まで案内してくれたら、型は通っています。

1. interface Seller を定義する。id(number) と name(string)
2. interface Item を定義する。id(number)・name(string)・price(number)・seller(Seller)
3. interface ItemsData を定義する。total(number) と items(Item[])
4. interface ItemsResponse を定義する。status(string) と data(ItemsData)
5. pickItems(response: ItemsResponse): string を定義する
6. 件数の部分は「全○件中○件」の形。中の数は配列に入っている件数
7. 商品1件は「商品名(出品者名) 価格円」の形で、商品どうしは「, 」でつなぐ
8. items が空のときはうしろを「該当なし」にする
9. any と as を使わないこと