TypeScript Getter / Setter 方法详解

在本教程中,你将学习如何使用 TypeScript 中的 getter 方法和 setter 方法。

TypeScript 中的 getter 和 setter 方法介绍

下面展示了一个简单的 Person 类,它只有三个属性:age, firstNamelastName

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

要访问 Person 类的属性,可以这么做:

let person = new Person();
person.age = 26;

假设你将一个来自用户输入的值赋值给 age 属性:

person.age = inputAge;

inputAge 变量可以是任意数字,为了保证年龄的有效性,可以在赋值前进行检查:

if (inputAge > 0 && inputAge < 200) {
  person.age = inputAge;
}

但是到处使用这个检查语句的话是冗余乏味的,为了避免重复检查,可以使用 gettersetter 方法,gettersetter 方法可以控制类属性的访问方式。对于每个属性来说:

getter 方法以 get 关键字开头,而 setter 方法以 set 关键字开头:

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

  // 译者注:原教程没有写 constructor 构造函数,TypeScript 会报错,这里补充上
  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}`;
  }
}

它是这样工作的:

  • 首先,把 age, firstNamelastName 属性的访问修饰符从 public 更改为 private
  • 接下来,把 age 属性更改为 _age
  • 第三,为 _age 属性添加 gettersetter 方法,在 setter 方法中,在用户输入的年龄变量值赋值给 _age 属性之前,检查变量值是否有效的。

现在,你可以通过下面的方式访问 agesetter 方法:

let person = new Person();
person.age = 10;

注意,调用 setter 方法不像常规的方法调用一样,方法名没有加上括号。当你调用 person.age 的时候,agesetter 方法会被调用,如果你设置了一个无效的 age 值,setter 方法会抛出错误提示:

person.age = 0;

错误提示:

Error: The age is invalid

当你访问 person.age 的时候,agegetter 方法会被调用:

console.log(person.age);

下面给 firstNamelastName 属性添加了 gettersetter 方法:

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

  // 译者注:原教程没有写 constructor 构造函数,TypeScript 会报错,这里补充上
  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}`;
  }
}

更多的 getter / setter 方法案例

正如从代码中所看到的,在给属性赋值之前使用 setter 方法进行数据验证是非常有用的,此外你还可以进行其他复杂的逻辑处理。

下面演示了如何创建 fullNamegettersetter 方法:

class Person {
  // ... other code
  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];
  }
}

它是这样工作的:

  • getter 方法返回 firstNamelastName 拼接后的字符串;
  • setter 方法接受一个字符串作为 fullName 变量,它的格式如下:第一个部分的字符串赋值给 firstName 属性,第二个部分的字符串赋值给 lastName 属性。

现在,你可以像普通的类属性一样访问 fullNamesettergetter 属性:

let person = new Person();
person.fullname = 'John Doe';

console.log(person.fullName);

小结

  • 使用 TypeScript 中的 getter / setter 方法来控制类属性的访问方式;
  • getter / setter 方法也被称为 accessor / mutator 方法。

教程来源于Github,感谢cody1991大佬的无私奉献,致敬!

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

深入浅出区块链 -〔陈浩〕

编辑训练营 -〔总编室〕

浏览器工作原理与实践 -〔李兵〕

分布式技术原理与算法解析 -〔聂鹏程〕

微信小程序全栈开发实战 -〔李艺〕

手把手教你玩音乐 -〔邓柯〕

程序员的个人财富课 -〔王喆〕

快手 · 移动端音视频开发实战 -〔展晓凯〕