【応用】ミニ在庫管理システムを作る

このレッスンでは、ここまで学んだinterface・ユニオン型・enum・クラスを組み合わせて、簡単な在庫管理システムを作ってみます。TypeScript入門の総仕上げの内容です。

実際の業務システムでは、「商品」のようなデータの形をinterfaceで定義し、「在庫状態」のような決まった選択肢をenumやリテラル型で表現し、それらをクラスにまとめて操作する、という組み合わせがよく使われます。

サンプルコードでは、interface Itemで商品の形を定義し、enum Statusで在庫状態を管理し、class Inventoryで在庫の追加・一覧表示をまとめて行っています。

ここまでのレッスンで学んだ型注釈・interface・enum・クラスの継承などは、実際の業務システムの設計でも土台となる考え方です。まずは小さなプログラムで型を意識しながら書く習慣をつけることが、実務でTypeScriptを使うための近道になります。

📖 お手本コード

enum Status {
  InStock,
  LowStock,
  OutOfStock,
}

interface Item {
  name: string;
  quantity: number;
}

class Inventory {
  private items: Item[] = [];

  add(item: Item): void {
    this.items.push(item);
  }

  statusOf(item: Item): Status {
    if (item.quantity === 0) return Status.OutOfStock;
    if (item.quantity < 5) return Status.LowStock;
    return Status.InStock;
  }

  report(): void {
    for (const item of this.items) {
      console.log(`${item.name}: ${item.quantity}個(${Status[this.statusOf(item)]})`);
    }
  }
}

const inv = new Inventory();
inv.add({ name: "ノート", quantity: 12 });
inv.add({ name: "消しゴム", quantity: 3 });
inv.add({ name: "定規", quantity: 0 });
inv.report();

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。