サンプルコードで身につける: インデックスアクセス型 — T[K] で型の一部を取り出す

type User = {
  id: number;
  userName: string;
};

// User["id"] は number 型、User["userName"] は string 型
type UserId = User["id"];
type UserName = User["userName"];

const nextId: UserId = 102;
const ownerName: UserName = "Hanako";

console.log(nextId);
console.log(ownerName);

type User = {
  id: number;
  userName: string;
  active: boolean;
};

// キーのユニオンを渡すと、値の型のユニオンが返る
type IdOrName = User["id" | "userName"]; // number | string
let displayValue: IdOrName = 101;
console.log(displayValue);
displayValue = "Taro";
console.log(displayValue);

// keyof と組み合わせると「全プロパティの値の型」のユニオンに
type AnyUserValue = User[keyof User]; // number | string | boolean
const sampleValue: AnyUserValue = true;
console.log(sampleValue);

// 選択肢の一覧は値として1回だけ書く
const menuItems = ["coffee", "tea", "soda"] as const;

// (typeof menuItems)[number] は "coffee" | "tea" | "soda"
type MenuItem = (typeof menuItems)[number];

let todaysPick: MenuItem = "tea";
console.log(todaysPick);

todaysPick = "soda"; // 一覧にある値ならOK
console.log(todaysPick);
// todaysPick = "milk"; // 配列にない値はエラー

console.log(menuItems.join(" / "));

type Order = {
  orderId: number;
  customer: {
    customerName: string;
    email: string;
  };
};

// ネストした部分の型を丸ごと/ピンポイントで取り出す
type Customer = Order["customer"];
type CustomerEmail = Order["customer"]["email"]; // string

const mainCustomer: Customer = { customerName: "Taro", email: "taro@example.com" };
const contactEmail: CustomerEmail = "hanako@example.com";

console.log(mainCustomer.customerName);
console.log(contactEmail);

type ApiResponse = {
  total: number;
  items: { id: number; title: string; price: number }[];
};

// 要素の型を手書きせず、レスポンス型から導出する
type CartItem = ApiResponse["items"][number];

function describeItem(item: CartItem): string {
  return item.title + " : " + item.price + "円";
}

const res: ApiResponse = {
  total: 2,
  items: [{ id: 1, title: "コーヒー", price: 480 }, { id: 2, title: "紅茶", price: 400 }],
};

for (const item of res.items) {
  console.log(describeItem(item));
}