配列とオブジェクトの組み合わせ(APIのJSONを型で表す)

配列は「同じ型の値が並んだもの」

配列(配列)は、同じ種類の値を順番に並べたものです。型は「要素の型 + []」で書きます。string[] は文字列の配列、number[] は数値の配列です。

const names: string[] = ["田中", "佐藤", "鈴木"];
const scores: number[] = [80, 92, 75];

オブジェクトの配列でAPIのJSONを表す

実際のAPIは「ユーザーの一覧」のように、オブジェクトが並んだ配列を返すことがよくあります。これは User[] のように、interface の名前に [] をつけて表せます。

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "田中" },
  { id: 2, name: "佐藤" },
];

さらにAPIのJSONは、オブジェクトの中にオブジェクトや配列が入る「入れ子(ネスト)」になることがあります。次のようなJSONを考えます。

{
  "id": 1,
  "name": "田中",
  "profile": { "age": 30, "city": "東京" },
  "tags": ["admin", "active"]
}

このJSONの形は、interface を組み合わせて次のように表せます。profile は別の interface に切り出すと読みやすくなります。

interface Profile {
  age: number;
  city: string;
}

interface User {
  id: number;
  name: string;
  profile: Profile;
  tags: string[];
}

const user = getUser(); // 型が any(なんでもあり)
console.log(user.profile.age); // age のはずが age と書けてしまう…つづりミスに気づけない

const user: User = getUser();
console.log(user.profile.age); // profile が Profile 型なので age 以外は赤線

• 配列の型は「要素の型 + []」(例: string[]、User[])
• オブジェクトの配列で API のユーザー一覧などを表せる
• 入れ子のJSONは interface を組み合わせて表す
• profile のような部分は別の interface に切り出すと読みやすい