TypeScript の Class

Jan 26, 2021

Class とは、ある「もの」を表すのに必要なものをまとめたもの。Blueprint （設計図）のようなもの。

例えば「乗り物」だったら、機能としては走れる。それを Class で表現すると

class Vehicle {
  drive(): void {
    console.log('Drive!');
  }
}

となる。これは設計図なので実際に「もの」として使うにはインスタンス化が必要。

const vehicle = new Vehicle();

vehicle.drive();

これで走れる。

継承

乗り物の中から「車」というものを Class で表現すると

class Car extends Vehicle {}

となる。Vehicle ができることは Car でもできる。これが継承。

const car = new Car();

car.drive();

car も走れる。

class Car extends Vehicle {
  drive(): void {
    console.log('Drive a car!');
  }
}

継承時に上書きすることもできる。

Modifier

メソッドの使える範囲を制限するものとして Modifier がある。

public: どこからでも使える（デフォルトはこれ）
private: その Class のみ使える
protected: その Class と子の Class のみ使える

class Car extends Vehicle {
  private drive(): void {
    console.log('Drive a car!');
  }
  
  startDriveProcesses(): void {
    this.drive();
  }
}

const car = new Car();
car.drive(); // エラーになる。

drive() に private をつけたのでインスタンでは drive() が使えなくなる。

Class 内の startDrive() では使える。

ただし、 Car の親である Vehicle にも drive() があり、そちらは public なので Car に private はつけられない。

親の modifier は変えられない。

class Vehicle {
  protected honk(): void {
    console.log('beep');
  }
}

class Car extends Vehicle {
  private drive(): void {
    console.log('Drive a car!');
  }

  startDriveProcesses(): void {
    this.drive();
  }

  startHonkProcesses(): void {
    this.honk();
  }
}

honk() に protected をつけたので子 Class の Car 内では使える。インスタンスでは使えない。

Field

Field は Class の値。

class Vehicle {
  color: string = 'red';

  protected honk(): void {
    console.log('beep');
  }
}

const vehicle = new Vehicle();
console.log(vehicle.color); // => red

インスタンス化するときに Field の値を更新できる。

const vehicle = new Vehicle('orange') としたい場合は以下のとおり。

class Vehicle {
  color: string = 'red';

  constructor(color: string) {
    this.color = color;
  }

  protected honk(): void {
    console.log('beep');
  }
}

const vehicle = new Vehicle('orange');
console.log(vehicle.color); // => orange

constructor() を使う。

上記だと color が複数回使われて面倒。

color を複数回使っているところを簡略化して書ける。

class Vehicle {
  constructor(public color: string) {}

  protected honk(): void {
    console.log('beep');
  }
}

const vehicle = new Vehicle('orange');
console.log(vehicle.color); // => orange

Field にも Modifier が使える。

Field の継承

Field も子 Class に継承される。

class Vehicle {
  constructor(public color: string) {}
}

class Car extends Vehicle {}

const car = new Car('red');
console.log(car.color); // => red

Car インスタンスを作成しようとすると Car Class には Constructor がないため、親の Constructor を見にいく。 Vehicle Class の color Field に必要な文字列を渡す必要があるためred がいる。

Car Class 独自の Field を作る場合は Car Class にも Constructor を作成する。

class Vehicle {
  constructor(public color: string) {}
}

class Car extends Vehicle {
  constructor(public wheels: number) {
    super('red');
  }
}

Car Class に Constructor を作成すると Vehicle の Constructor に引数を渡せなくなる。

そこで super() を作成して引数を渡せるようにする。

super() は Superclass のことで親 Class のこと。 super() に引数を渡すことにより親要素である Vehicle の Constructor に渡せる。

red をハードコーディングではなくインスタンス作成時に渡せるようにするために、Car Class の Constructor の引数を2つにする。

class Vehicle {
  constructor(public color: string) {}
}

class Car extends Vehicle {
  constructor(public wheels: number, color: string) {
    super(color);
  }
}