API レスポンスの型を定義する

01 / 03

サーバーのデータに型をつける

現場のフロントエンドは、サーバーから JSON を受け取って画面に出す。JSON は { id: 1, title: "買い物", done: false } のようなオブジェクトだよ。

このデータの形を先に宣言しておくのが、現場の第一歩。interface で書いておけば、プロパティを打ちまちがえたときにすぐ分かるんだ。

interface TodoItem {  id: number;  title: string;  done: boolean;}const item: TodoItem = { id: 1, title: "買い物", done: false };console.log(item.title);

実行結果

買い物

02 / 03

API からの配列にも型が効く

サーバーからは配列で来ることが多い。TodoItem[] と書いておけば、for...of で取り出したときも型が付くよ。

interface TodoItem {  id: number;  title: string;  done: boolean;}const items: TodoItem[] = [  { id: 1, title: "買い物", done: false },  { id: 2, title: "掃除", done: true },];for (const item of items) {  console.log(`${item.title}: ${item.done ? "完了" : "未完了"}`);}

実行結果

買い物: 未完了
掃除: 完了

03 / 03

現場では型定義ファイルに書く

型は1つのファイルにまとめておくのが定番だよ。他のファイルから import type { TodoItem } で取り込む。

型定義がサーバーの仕様書の代わりになるんだ。「このデータはこの形で来る」ということを、コードの中に書き残せる。