サンプルコードで身につける: クラスのプロパティとメソッドの型

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1プロパティ1つの最小クラス

プロパティを「名前: 型」で宣言し、初期値を直接書く最小の形です。メソッドの中では this 経由でプロパティに触り、外からは . で読めることを確かめます。

TypeScript

class Counter {
  // プロパティは「名前: 型」で宣言し、初期値も書ける
  count: number = 0;

  increment(): void {
    this.count = this.count + 1;
  }
}

const visitCounter = new Counter();
visitCounter.increment();
visitCounter.increment();
console.log(visitCounter.count);
// visitCounter.count = "many"; // number 以外の代入はエラー

2コンストラクタで初期化する

外から値を受け取って初期化するクラスの基本形です。コンストラクタの引数にも型注釈を付けること、宣言したプロパティはコンストラクタで初期化しないとエラーになることを示します。

TypeScript

class Rectangle {
  width: number;
  height: number;

  // コンストラクタの引数にも型を書く。初期化漏れはエラーになる
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  area(): number {
    return this.width * this.height;
  }
}

const businessCard = new Rectangle(9, 5);
console.log(businessCard.width);
console.log(businessCard.area());

3配列のプロパティを持つクラス

プロパティの型は string[] のような配列でも構いません。データを溜め込むメソッドと、集計して返すメソッドの戻り値型をそれぞれ宣言する、状態を持つクラスの典型的な形です。

TypeScript

class TodoList {
  // 配列のプロパティも型を宣言して初期化する
  tasks: string[] = [];

  add(task: string): void {
    this.tasks.push(task);
  }

  count(): number {
    return this.tasks.length;
  }
}

const myList = new TodoList();
myList.add("買い物");
myList.add("掃除");
console.log(myList.tasks);
console.log(myList.count());

4クラス名はそのまま型になる

クラスを定義すると、同じ名前がそのまま型としても使えるようになります。関数の引数を Point2D 型にして、インスタンス同士を計算に使う例で「クラス = 設計図 + 型」という二面性を確かめます。

TypeScript

class Point2D {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

// クラス名はそのまま引数の型としても使える
function distance(a: Point2D, b: Point2D): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.sqrt(dx * dx + dy * dy);
}

console.log(distance(new Point2D(0, 0), new Point2D(3, 4)));

5買い物カゴクラスで型をフル活用

type で定義した CartItem をプロパティの要素型に使い、追加と合計のメソッドを備えた実務寄りのクラスです。プロパティ・引数・戻り値のすべてに型が付くことで、カゴの中身の形が崩れないことが保証されます。

TypeScript

type CartItem = { itemName: string; price: number; quantity: number };

class ShoppingCart {
  items: CartItem[] = [];
  addItem(item: CartItem): void {
    this.items.push(item);
  }
  totalPrice(): number {
    let total = 0;
    for (const item of this.items) {
      total = total + item.price * item.quantity;
    }
    return total;
  }
}

const cart = new ShoppingCart();
cart.addItem({ itemName: "コーヒー豆", price: 1200, quantity: 2 });
cart.addItem({ itemName: "フィルター", price: 300, quantity: 1 });
console.log(cart.totalPrice());