TypeScriptのinterfaceとは？オブジェクト型の定義と使い方を解説

// プロパティが増えるほど読みにくくなる
const user: { id: number; name: string; email: string; age: number } = {
  id: 1, name: "Alice", email: "alice@example.com", age: 28,
};

// interface で型に名前をつける
interface User {

  id:      number;

  name:    string;

  email:   string;

  age:     number;

  isAdmin: boolean;

}


// 変数に使う
const alice: User = {
  id: 1, name: "Alice", email: "alice@example.com", age: 28, isAdmin: false,
};

// 関数の引数にも使える
function printUser(user: User): void {
  console.log(`[${user.id}] ${user.name} <${user.email}>`);
}

printUser(alice); // → [1] Alice <alice@example.com>

// 定義にないプロパティはエラー
const bob: User = {
  id: 2, name: "Bob", email: "bob@example.com", age: 32, isAdmin: true,
  phone: "090-0000-0000",  // エラー: 'phone' は User に存在しない

};

// interface：オブジェクト形状の定義に使う（推奨）
interface Article {
  id:    number;
  title: string;
  body:  string;
}

// type：Union型・プリミティブ別名はtypeで書く
type ID     = number | string;          // Union型
type Status = "draft" | "published" | "archived"; // リテラル Union
type Point  = { x: number; y: number };  // typeでもオブジェクトを書ける

// Intersection（&）で型を合成する
type ArticleWithStatus = Article & { status: Status };

const draft: ArticleWithStatus = {
  id: 1, title: "下書き", body: "...", status: "draft",
};

console.log(draft.title, draft.status); // → 下書き draft

interface Address {
  zipCode:  string;
  city:     string;
  street:   string;
}

interface Company {
  name:    string;
  address: Address;   // ← Address を入れ子にする
}

interface Employee {
  id:      number;
  name:    string;
  company: Company;  // ← Company を入れ子にする
  skills:  string[]; // ← 配列も持てる
}

const emp: Employee = {
  id: 1,
  name: "田中 太郎",
  company: {
    name: "サンプル株式会社",
    address: {
      zipCode: "100-0001",
      city:    "東京都千代田区",
      street:  "丸の内 1-1-1",
    },
  },
  skills: ["TypeScript", "React", "Node.js"],
};

console.log(emp.name);                   // → 田中 太郎
console.log(emp.company.address.city); // → 東京都千代田区
console.log(emp.skills.join(", "));    // → TypeScript, React, Node.js

// GET /api/posts のレスポンス（JSON）
{
  "data": [
    {
      "id": number,
      "title": string,
      "body": string,
      "status": "draft" | "published",
      "author": { id: number, name: string },
      "publishedAt": string | null
    }
  ],
  "meta": {
    "total": number,
    "perPage": number,
    "currentPage": number,
    "lastPage": number
  }
}

// 再利用する小さな型から定義する
type PostStatus = "draft" | "published";

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

interface Post {
  id:          number;
  title:       string;
  body:        string;
  status:      PostStatus;
  author:      Author;
  publishedAt: string | null; // null になり得るプロパティ
}

interface PaginationMeta {
  total:       number;
  perPage:     number;
  currentPage: number;
  lastPage:    number;
}

// ページネーション付きレスポンスのラッパー
interface PaginatedResponse<T> {
  data: T[];
  meta: PaginationMeta;
}

// 実際のAPIレスポンスを模擬したデータ
const response: PaginatedResponse<Post> = {
  data: [
    {
      id: 1,
      title: "TypeScript入門",
      body:  "TypeScriptは...",
      status: "published",
      author: { id: 10, name: "Alice" },
      publishedAt: "2025-04-01",
    },
    {
      id: 2,
      title: "Bun入門",
      body:  "Bunとは...",
      status: "draft",
      author: { id: 10, name: "Alice" },
      publishedAt: null, // 下書きは null
    },
  ],
  meta: { total: 24, perPage: 10, currentPage: 1, lastPage: 3 },
};

// データを安全に操作できる
response.data.forEach((post) => {
  const published = post.publishedAt ?? "未公開";
  console.log(`[${post.status}] ${post.title} by ${post.author.name} (${published})`);
});

console.log(`全${response.meta.total}件 / ${response.meta.lastPage}ページ`);