TypeScript：総合演習：型安全な在庫管理

出力 == ノートPC [PC]

リテラル型を type で定義し、Product の中で使う（TS06・07）。

type Category = "PC" | "周辺機器";

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

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

console.log(`${item.name} [${item.category}]`);

型定義がそのままデータ仕様書になる。カテゴリが2種類しか無いことが、読むだけで分かる。

解答 == B

「値が無いかもしれない」を表す方法（TS08）。

B

0個と未登録は違う状態。number だけでは0で代用するしかなく、意味が混ざってしまう。

出力 == 在庫総額：640,000円

?? 0 で null を0に置き換えてから計算する（TS08）。

type Product = { name: string; price: number; stock: number | null };

const items: Product[] = [
  { name: "ノートPC", price: 128000, stock: 5 },
  { name: "マウス", price: 3200, stock: null },
];

const total = items.reduce((sum, i) => sum + i.price * (i.stock ?? 0), 0);

console.log(`在庫総額：${total.toLocaleString()}円`);

?? 0 が無いとコンパイルが通らない。null との掛け算はできないので、TypeScriptが対処を強制してくれる。

type Result<T> =
  | { ok: true; value: T }
  ____ { ok: false; error: string };

function show(r: Result<number>): void {
  console.log(r.ok ? r.value : r.error);
}

show({ ok: true, value: 42 });

出力 == 42

複数の型をつなぐ記号（TS06）。

|

成功と失敗を1つの型で表す。呼び出し側は ok を確認しないと値を取り出せない。

解答 == B

実行時に確認できる方法はどれか（TS15）。

B

境界で検証すれば、内側では型を信じて書ける。これが型安全なシステムの基本設計。

出力4行。未登録 / 品切れ / 残りわずか / 在庫あり

戻り値の型をリテラル型のユニオンにする（TS06）。null判定を最初に書く（TS13）。

type StockLabel = "未登録" | "品切れ" | "残りわずか" | "在庫あり";

function stockLabel(stock: number | null): StockLabel {
  if (stock === null) return "未登録";
  if (stock === 0) return "品切れ";
  if (stock < 10) return "残りわずか";
  return "在庫あり";
}

for (const s of [null, 0, 5, 50]) {
  console.log(stockLabel(s));
}

戻り値をリテラル型にすると、返せる値が4つに限定される。打ち間違いがその場でエラーになる。

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

type Summary = ____<Product, "id" | "name">;

const s: Summary = { id: 1, name: "PC" };
console.log(Object.keys(s).join(","));

出力 == id,name

指定した項目だけを取り出すUtility型（TS13）。4文字。

Pick

元の型を1箇所直せば、派生した型すべてに反映される。同じ項目を何度も書かない設計。

解答 == B

種類を追加したときに何が起きるか（TS16）。

B

修正漏れをコンパイラが教えてくれる。大規模なコードほど、この仕組みの価値が高くなる。

出力2行。ノートPC / 商品が見つかりません

find の結果が undefined なら失敗を返す（TS16）。

type Product = { id: number; name: string };
type Result<T> =
  | { ok: true; value: T }
  | { ok: false; error: string };

const items: Product[] = [{ id: 1, name: "ノートPC" }];

function findProduct(id: number): Result<Product> {
  const found = items.find((i) => i.id === id);
  return found
    ? { ok: true, value: found }
    : { ok: false, error: "商品が見つかりません" };
}

for (const id of [1, 99]) {
  const r = findProduct(id);
  console.log(r.ok ? r.value.name : r.error);
}

失敗が型に現れているので、呼び出し側は必ず確認する。TS11で undefined を扱ったのと同じ問題を、より明示的に解決している。

出力2行。131200 / 47

function sumBy(items: T[], fn: (item: T) => number): number と書く（TS10）。

function sumBy<T>(items: T[], fn: (item: T) => number): number {
  return items.reduce((sum, i) => sum + fn(i), 0);
}

const products = [
  { name: "ノートPC", price: 128000, stock: 5 },
  { name: "マウス", price: 3200, stock: 42 },
];

console.log(sumBy(products, (p) => p.price));
console.log(sumBy(products, (p) => p.stock));

1つの関数で何を合計するかを外から指定できる。any を使わずに汎用性を確保できるのがジェネリクスの価値。

出力4行が完全一致

stockLabel で状態を判定し、null の場合は個数表示を変える。

type Product = { name: string; stock: number | null };

function stockLabel(stock: number | null): string {
  if (stock === null) return "未登録";
  if (stock === 0) return "品切れ";
  if (stock < 10) return "残りわずか";
  return "在庫あり";
}

const items: Product[] = [
  { name: "ノートPC", stock: 5 },
  { name: "マウス", stock: null },
  { name: "サンプル", stock: 0 },
];

for (const i of items) {
  const count = i.stock === null ? "" : `（${i.stock}個）`;
  console.log(`${i.name}：${stockLabel(i.stock)}${count}`);
}

const unregistered = items.filter((i) => i.stock === null).length;
console.log(`未登録${unregistered}件`);

null を「例外」ではなく「1つの状態」として扱っている。未登録も正常なデータであり、それを型で表現できている。

出力 == 取込2件 / 除外1件

型ガードで検証し、filter で絞る（TS15）。

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

function isProduct(v: unknown): v is Product {
  if (typeof v !== "object" || v === null) return false;
  const o = v as Record<string, unknown>;
  return typeof o.name === "string" && typeof o.price === "number";
}

const json =
  '[{"name":"A","price":100},{"name":"B","price":"200"},{"name":"C","price":300}]';

const raw: unknown = JSON.parse(json);
const all = Array.isArray(raw) ? raw : [];
const valid = all.filter(isProduct);

console.log(`取込${valid.length}件 / 除外${all.length - valid.length}件`);

境界で不正なデータを弾いている。この先の処理は Product[] だけを扱えばよく、型を信じて書ける。

出力2行。PC：2件・173,000円 / 周辺機器：1件・3,200円

reduce> でカテゴリ別に件数と金額を集める（TS11・13）。

type Category = "PC" | "周辺機器";
type Product = { name: string; category: Category; price: number };

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

const summary = items.reduce<Record<string, { count: number; total: number }>>(
  (acc, i) => {
    const current = acc[i.category] ?? { count: 0, total: 0 };
    acc[i.category] = {
      count: current.count + 1,
      total: current.total + i.price,
    };
    return acc;
  },
  {}
);

for (const [category, s] of Object.entries(summary)) {
  console.log(`${category}：${s.count}件・${s.total.toLocaleString()}円`);
}

集計結果もオブジェクトの型で表現している。Record の値に複数の情報を持たせることで、1回のループで件数と金額を同時に集められる。

出力5行。成功1件 / 失敗3件

3種類の失敗をそれぞれ Result で返す（TS16）。

type Product = { id: number; name: string; price: number; stock: number };
type Result<T> =
  | { ok: true; value: T }
  | { ok: false; error: string };

const products: Product[] = [
  { id: 1, name: "ノートPC", price: 128000, stock: 5 },
];

function order(id: number, qty: number): Result<number> {
  if (qty <= 0) return { ok: false, error: "数量が不正です" };

  const p = products.find((x) => x.id === id);
  if (!p) return { ok: false, error: "商品が見つかりません" };

  if (qty > p.stock) return { ok: false, error: "在庫が不足しています" };

  return { ok: true, value: p.price * qty };
}

const requests = [
  { id: 1, qty: 2 },
  { id: 1, qty: 0 },
  { id: 1, qty: 99 },
  { id: 9, qty: 1 },
];

let ok = 0;
let ng = 0;

for (const r of requests) {
  const result = order(r.id, r.qty);
  if (result.ok) {
    ok++;
    console.log(`✅ ${result.value.toLocaleString()}円`);
    continue;
  }
  ng++;
  console.log(`❌ ${result.error}`);
}

console.log(`成功${ok}件 / 失敗${ng}件`);

失敗の理由が呼び出し側に正確に伝わる。例外なら try/catch で一括りにされ、理由の判別が難しくなる。

出力 == 1: 新商品 (5,000円)

Omit で受け取り、id を付けて Product にする（TS13）。

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

type ProductInput = Omit<Product, "id">;
type ProductSummary = Pick<Product, "id" | "name" | "price">;

function create(input: ProductInput, id: number): Product {
  return { id, ...input };
}

function summarize(p: Product): ProductSummary {
  return { id: p.id, name: p.name, price: p.price };
}

const created = create(
  { name: "新商品", price: 5000, category: "PC", stock: 10 },
  1
);

const s = summarize(created);
console.log(`${s.id}: ${s.name} (${s.price.toLocaleString()}円)`);

1つの型から用途別の型が派生している。Product に項目を追加すれば、両方に自動で反映される。