4/18 TypeScript Class宣言 ゲッターセッター

ゲッターセッターとは

ゲッター

データを取得した時に何かの関数を実行したい時に使う

セッター

何かの値を変更・代入したい時に使う

※TypeScriptには存在しないもの、es6には存在する

使い方

class Teacher extends Person {
  get subject(): string {
    if (!this._subject) {
      throw new Error('サブジェクトがないぜ！')
    }
    return this._subject;
  }
  set subject(value) {
    if (!value) {
      throw new Error('セッターに代入する値が空文字だぜ！');
    }
    this._subject = value;
  }
  constructor(name: string, age: number, private _subject: string) {
    super(name, age);
  }
.
.
.

ゲッター

• get を付けて定義する
• teacher.subjectを呼び出した時に実行したい関数を定義できる
• const teacher = new Teacher('yuki', 28, 'TypeScript');とインスタンス化して、teacher.subjectを呼び出したら、return this._subjectが返るので、TypeScriptが返り値となる

セッター

• setを付けて定義する
• 必ず引数を持たせなければならない
• teacher.subject = 'React'; をすると セッターの引数には’React’が渡り、this._subjectの値が変更（代入）される

class Person {
  constructor(public readonly name: string, public age: number) {}
  greeting() {
    console.log(`おはようございます、${this.name}でございます。年齢は${this.age}です。`)
  }
  incrementAge() {
    this.age += 1;
  }
}

class Teacher extends Person {
  get subject(): string {
    if (!this._subject) {
      throw new Error('サブジェクトがないぜ！')
    }
    return this._subject;
  }
  set subject(value) {
    if (!value) {
      throw new Error('セッターに代入する値が空文字だぜ！');
    }
    this._subject = value;
  }
  constructor(name: string, age: number, private _subject: string) {
    super(name, age);
  }
    override greeting() {
      console.log(`こんにちは、教師の${this.name}です。年齢は${this.age}です。`)
  }
}

const teacher = new Teacher('yuki', 28, 'TypeScript');
console.log(teacher.subject); // インスタンス化時に渡したTypeScriptがゲッターを通して出力される
teacher.subject = 'React'; // セッターにReactを渡して代入される
console.log(teacher.subject); // セッターを通して代入されたReactが出力される
teacher.greeting();

実行結果

[LOG]: "TypeScript" 
[LOG]: "React" 
[LOG]: "こんにちは、教師のyukiです。年齢は28です。"

参考

Udemy 超TypeScript入門パック