32. クラスのプロパティとメソッドの型

クラスでは、プロパティをクラスの先頭で「名前: 型」の形で宣言します。メソッドは通常の関数と同じく、引数と戻り値に型を書きます。コンストラクタの引数にも型注釈を付けます。

プロパティを宣言しておくと、this.x のタイプミスや、想定と違う型の代入をコンパイラが検出してくれます。JavaScript のクラスとの違いは「使うプロパティを先に宣言する」点で、クラスの持つデータが一覧として読めるようになります。

つまずきポイントは、宣言したプロパティはコンストラクタで初期化が必要なことです(初期値を直接書いてもかまいません)。初期化漏れもエラーとして教えてくれます。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

class Point2D {
  // プロパティは「名前: 型」で宣言する
  x: number;
  y: number;

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

  // メソッドの型は関数と同じ書き方
  distanceFromOrigin(): number {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
}

const point = new Point2D(3, 4);
console.log(point.x);
console.log(point.distanceFromOrigin());

公式ドキュメントで詳しく ↗