TypeScript Getter 和 Setter - TypeScript 教程

摘要：在本教程中，您将学习如何使用 TypeScript 的 getter 和 setter。

TypeScript Getter 和 Setter 简介

下面展示了一个简单的 Person 类，它包含三个属性：age、firstName 和 lastName

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)

在所有地方都使用此检查是冗余且繁琐的。

为了避免重复检查，您可以使用 setter 和 getter。getter 和 setter 允许您控制对类属性的访问。

对于每个属性

getter 方法返回属性值的 value。getter 也称为访问器。
setter 方法更新属性的 value。setter 也称为修改器。

getter 方法以关键字 get 开头，setter 方法以关键字 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 属性创建 getter 和 setter 方法。在 setter 方法中，在将输入年龄赋给 _age 属性之前，检查输入年龄的有效性。

现在，您可以按如下方式访问 age setter 方法

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

请注意，对 setter 的调用没有像普通方法那样的括号。当您调用 person.age 时，会调用 age setter 方法。如果您赋予无效的 age 值，setter 将抛出错误

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

错误

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

当您访问 person.age 时，会调用 age getter。

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

以下代码将 getter 和 setter 添加到 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 Getter/Setter 示例

从代码中可以看到，当您希望在将数据赋给属性之前验证数据时，setter 非常有用。此外，您还可以执行复杂的逻辑。

以下展示了如何创建 fullname getter 和 setter。

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)

工作原理。

getter 方法返回名字和姓氏的连接。
setter 方法接受一个字符串作为完整名称，格式为：first last，并将第一部分赋给名字属性，第二部分赋给姓氏属性。

现在，您可以像访问普通类属性一样访问 fullname setter 和 getter

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

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

总结

使用 TypeScript getter/setter 控制对类属性的访问。
getter/setter 也称为访问器/修改器。

本教程对您有帮助吗？