TypeScript ゲッター＆セッター

概要：このチュートリアルでは、TypeScript のゲッターとセッターの使い方を学びます。

TypeScript ゲッターとセッターの紹介

以下は、age、firstName、lastName の3つのプロパティを持つシンプルな Person クラスを示しています。

class Person {
    public age: number;
    public firstName: string;
    public lastName: string;

    constructor(age: number, firstName: string, lastName: string) {
        this.age = age;
        this.firstName = firstName;
        this.lastName = lastName;
    }
}Code language: TypeScript (typescript)

Person クラスの任意のプロパティにアクセスするには、次のようにします。

let person = new Person(22, 'John','Doe');
person.age = 23;Code language: TypeScript (typescript)

ユーザー入力から取得した値を age プロパティに代入するとします。

person.age = inputAge;Code language: TypeScript (typescript)

inputAge は任意の数値です。年齢の有効性を確保するために、次のように代入前にチェックを行うことができます。

if( inputAge > 0 && inputAge < 200 ) {
    person.age = inputAge;
}
Code language: TypeScript (typescript)

このチェックをいたるところで行うのは冗長で面倒です。

チェックの繰り返しを避けるために、セッターとゲッターを使用できます。ゲッターとセッターを使用すると、クラスのプロパティへのアクセスを制御できます。

各プロパティについて

ゲッターメソッドはプロパティの値を返します。ゲッターはアクセッサとも呼ばれます。
セッターメソッドはプロパティの値を更新します。セッターはミューテーターとも呼ばれます。

ゲッターメソッドはキーワード get で始まり、セッターメソッドはキーワード set で始まります。

class Person {
  private _age: number;
  private _firstName: string;
  private _lastName: string;

  constructor(age: number, firstName: string, lastName: string) {
    this._age = age;
    this._firstName = firstName;
    this._lastName = lastName;
  }

  public get age() {
    return this._age;
  }

  public set age(theAge: number) {
    if (theAge <= 0 || theAge >= 200) {
      throw new Error('The age is invalid');
    }
    this._age = theAge;
  }

  public getFullName(): string {
    return `${this._firstName} ${this._lastName}`;
  }
}
Code language: TypeScript (typescript)

動作方法。

まず、age、firstName、lastName プロパティのアクセス修飾子を public から private に変更します。
次に、プロパティ age を _age に変更します。
次に、_age プロパティのゲッターとセッターメソッドを作成します。セッターメソッドでは、_age プロパティに代入する前に、入力された年齢の有効性をチェックします。

これで、次のように age セッターメソッドにアクセスできます。

let person = new Person(22, 'John', 'Doe');
person.age = 23;Code language: TypeScript (typescript)

セッターへの呼び出しには、通常のメソッドのように括弧がありません。person.age を呼び出すと、age セッターメソッドが呼び出されます。無効な age 値を代入すると、セッターはエラーをスローします。

person.age = 0;Code language: TypeScript (typescript)

エラー

Error: The age is invalidCode language: TypeScript (typescript)

person.age にアクセスすると、age ゲッターが呼び出されます。

console.log(person.age);Code language: TypeScript (typescript)

以下は、firstName と lastName プロパティにゲッターとセッターを追加したものです。

class Person {
  private _age: number;
  private _firstName: string;
  private _lastName: string;

  constructor(age: number, firstName: string, lastName: string) {
    this._age = age;
    this._firstName = firstName;
    this._lastName = lastName;
  }

  public get age() {
    return this._age;
  }

  public set age(theAge: number) {
    if (theAge <= 0 || theAge >= 200) {
      throw new Error('The age is invalid');
    }
    this._age = theAge;
  }

  public get firstName() {
    return this._firstName;
  }

  public set firstName(theFirstName: string) {
    if (!theFirstName) {
      throw new Error('Invalid first name.');
    }
    this._firstName = theFirstName;
  }

  public get lastName() {
    return this._lastName;
  }

  public set lastName(theLastName: string) {
    if (!theLastName) {
      throw new Error('Invalid last name.');
    }
    this._lastName = theLastName;
  }

  public getFullName(): string {
    return `${this._firstName} ${this._lastName}`;
  }
}Code language: TypeScript (typescript)

その他の TypeScript ゲッター/セッターの例

コードからわかるように、セッターはプロパティに値を代入する前にデータを検証したい場合に役立ちます。さらに、複雑なロジックを実行することもできます。

以下は、fullname ゲッターとセッターを作成する方法を示しています。

class Person {
  private _age: number;
  private _firstName: string;
  private _lastName: string;

  constructor(age: number, firstName: string, lastName: string) {
    this._age = age;
    this._firstName = firstName;
    this._lastName = lastName;
  }

  public get age() {
    return this._age;
  }

  public set age(theAge: number) {
    if (theAge <= 0 || theAge >= 200) {
      throw new Error('The age is invalid');
    }
    this._age = theAge;
  }

  public get firstName() {
    return this._firstName;
  }

  public set firstName(theFirstName: string) {
    if (!theFirstName) {
      throw new Error('Invalid first name.');
    }
    this._firstName = theFirstName;
  }

  public get lastName() {
    return this._lastName;
  }

  public set lastName(theLastName: string) {
    if (!theLastName) {
      throw new Error('Invalid last name.');
    }
    this._lastName = theLastName;
  }

  public get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  public set fullName(name: string) {
    let parts = name.split(' ');
    if (parts.length != 2) {
      throw new Error('Invalid name format: first last');
    }
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
}
Code language: TypeScript (typescript)

動作方法。

ゲッターメソッドは、名と姓を連結したものを返します。
セッターメソッドは、first last の形式のフルネームを文字列として受け取り、最初の部分を名プロパティに、2番目の部分を姓プロパティに代入します。

これで、通常のクラスプロパティのように fullname セッターとゲッターにアクセスできます。

let person = new Person(22, 'Jane', 'Doe');

person.fullName = 'Jane Smith';
console.log(person.fullName); //   "Jane Smith" Code language: TypeScript (typescript)

まとめ

TypeScript のゲッター/セッターを使用して、クラスのプロパティへのアクセスを制御します。
ゲッター/セッターは、アクセッサ/ミューテーターとも呼ばれます。

このチュートリアルは役に立ちましたか？