TypeScript：type と interface

出力 == ノートPC：128,000円

type Product = { id: number; name: string; price: number }; と書く。

type Product = {
  id: number;
  name: string;
  price: number;
};

const item: Product = { id: 1, name: "ノートPC", price: 128000 };

console.log(`${item.name}：${item.price.toLocaleString()}円`);

型に名前が付くと、以降は Product と書くだけで済む。TS03で毎回書いていた長い型定義から解放される。

解答 == B

ユニオン型に名前を付けられるのはどちらか。

B

type は使える範囲が広い。type Status = "A" | "B"; は書けるが、interface では書けない。迷ったら type を使えばよい。

出力 == 田中商事（東京）

interface Customer { id: number; name: string; area: string } と書く（イコールは不要）。

interface Customer {
  id: number;
  name: string;
  area: string;
}

const c: Customer = { id: 1, name: "田中商事", area: "東京" };

console.log(`${c.name}（${c.area}）`);

interface にはイコールが要らないのが type との見た目の違い。中身の書き方はほぼ同じ。

____ Point = { x: number; y: number };

const p: Point = { x: 3, y: 4 };
console.log(p.x + p.y);

出力 == 7

型に別名を付けるキーワード。小文字4文字。

type

type は「型に名前を付ける」ためのキーワード。オブジェクト・ユニオン型・関数の型など、どんな型にも使える。

解答 == B

& は「かつ」を表す。

B

& は交差型と呼ばれ、両方の性質を併せ持つ型を作る。|（どちらか）とは逆の意味になる。

出力 == ノートPC：在庫5個

type StockProduct = Product & { stock: number }; と書く。

type Product = {
  id: number;
  name: string;
  price: number;
};

type StockProduct = Product & { stock: number };

const item: StockProduct = {
  id: 1,
  name: "ノートPC",
  price: 128000,
  stock: 5,
};

console.log(`${item.name}：在庫${item.stock}個`);

既存の型を土台にして新しい型を作れる。Product が変われば StockProduct も自動的に追随するので、修正漏れが起きない。

interface Base { id: number }

interface Item ____ Base {
  name: string;
}

const i: Item = { id: 1, name: "A" };
console.log(i.id, i.name);

出力 == 1 A

「拡張する」を意味する7文字のキーワード。

extends

interface は extends で拡張する。type の & とほぼ同じ結果になるが、書き方が違う。

解答 == A

interface はオブジェクトの形を定義するもの。

A

interface はオブジェクト以外に名前を付けられない。TS06で書いた type Status = … は、type でなければ書けなかった。

出力2行。ノートPC(128,000円) / マウス(3,200円)

関数の引数の型に Product を使う。for...of で回す。

type Product = {
  id: number;
  name: string;
  price: number;
};

function label(p: Product): string {
  return `${p.name}(${p.price.toLocaleString()}円)`;
}

const items: Product[] = [
  { id: 1, name: "ノートPC", price: 128000 },
  { id: 2, name: "マウス", price: 3200 },
];

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

関数の引数・配列の要素・変数の型、すべてに同じ名前を使える。型名が処理の全体に一貫性を与えている。

出力 == 注文1：田中商事（2点）

型の中で他の型を使える。items は Product[] と書く。

type Customer = { id: number; name: string };
type Product = { id: number; name: string; price: number };

type Order = {
  id: number;
  customer: Customer;
  items: Product[];
};

const order: Order = {
  id: 1,
  customer: { id: 1, name: "田中商事" },
  items: [
    { id: 1, name: "ノートPC", price: 128000 },
    { id: 2, name: "マウス", price: 3200 },
  ],
};

console.log(`注文${order.id}：${order.customer.name}（${order.items.length}点）`);

型を部品として組み合わせる——TS03で入れ子の型を長々と書いた課題が、こうして整理できる。実務のデータ構造はこの形で表現する。

出力 == ノートPC, モニター

型を1回定義すれば、配列にも filter の中でも使える。

type Product = {
  id: number;
  name: string;
  price: number;
  category: string;
};

const products: Product[] = [
  { id: 1, name: "ノートPC", price: 128000, category: "PC" },
  { id: 2, name: "マウス", price: 3200, category: "周辺機器" },
  { id: 3, name: "モニター", price: 45000, category: "PC" },
];

const pcs = products.filter((p) => p.category === "PC");

console.log(pcs.map((p) => p.name).join(", "));

型定義は1箇所、使用は何箇所でも。もし category を数値に変える必要が出ても、型定義の1行を直せば、使っている全箇所でエラーが出て修正漏れを防げる。

出力2行が完全一致

type InventoryItem = Product & { stock: number; location: string }; と書く。

type Product = {
  id: number;
  name: string;
  price: number;
};

type InventoryItem = Product & {
  stock: number;
  location: string;
};

const items: InventoryItem[] = [
  { id: 1, name: "ノートPC", price: 128000, stock: 5, location: "棚A" },
  { id: 2, name: "マウス", price: 3200, stock: 42, location: "棚B" },
];

for (const item of items) {
  console.log(`${item.name}：${item.stock}個（${item.location}）`);
}

商品情報と在庫情報を分けて定義し、必要な場面で合成している。カタログでは Product、倉庫では InventoryItem と使い分けられる。

出力 == 未発送合計：128,000円

TS06のリテラル型を type で定義し、Order の中で使う。filter と reduce で集計する。

type Status = "未発送" | "発送済";

type Order = {
  id: number;
  status: Status;
  amount: number;
};

const orders: Order[] = [
  { id: 1, status: "未発送", amount: 128000 },
  { id: 2, status: "発送済", amount: 45000 },
];

const total = orders
  .filter((o) => o.status === "未発送")
  .reduce((sum, o) => sum + o.amount, 0);

console.log(`未発送合計：${total.toLocaleString()}円`);

リテラル型を型の部品として使っている。o.status === "未発送中" のような打ち間違いは、比較した時点でエラーになる。

出力2行が完全一致

interface VipCustomer extends Customer { rank: string } と書く。VIPだけ ★rank を付ける。

interface Customer {
  id: number;
  name: string;
  area: string;
}

interface VipCustomer extends Customer {
  rank: string;
}

const normal: Customer = { id: 1, name: "田中商事", area: "東京" };
const vip: VipCustomer = { id: 2, name: "鈴木工業", area: "大阪", rank: "S" };

console.log(`${normal.name}（${normal.area}）`);
console.log(`${vip.name}（${vip.area}）★${vip.rank}`);

VipCustomer は Customer としても扱える。Customer を引数に取る関数に VipCustomer を渡せるので、共通処理はまとめて書ける。

出力4行が完全一致

OrderLine の中に Product を入れ子にする。金額は line.product.price * line.qty。

type Product = {
  id: number;
  name: string;
  price: number;
};

type OrderLine = {
  product: Product;
  qty: number;
};

const lines: OrderLine[] = [
  { product: { id: 1, name: "ノートPC", price: 128000 }, qty: 2 },
  { product: { id: 2, name: "マウス", price: 3200 }, qty: 5 },
  { product: { id: 3, name: "キーボード", price: 8500 }, qty: 3 },
];

let total = 0;

for (const line of lines) {
  const amount = line.product.price * line.qty;
  total += amount;
  console.log(
    `${line.product.name} × ${line.qty} = ${amount.toLocaleString()}円`
  );
}

console.log(`合計：${total.toLocaleString()}円`);

型の入れ子が、データの入れ子をそのまま表している。line.product.name のように辿れるのは、型が構造を知っているから。打ち間違えれば即座に分かる。