TypeScript Getter 和 Setter

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

TypeScript Getter 和 Setter 简介

下面显示了一个简单的 Person 类，它具有三个属性：age、firstName 和 lastName：

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;
}

在所有地方都进行这样的检查冗余又麻烦。

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

对于每个属性：

getter 方法返回属性值的值。
setter 方法更新属性的值。

getter 方法以关键字 get 开头，setter 方法以关键字 set 开头。

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

 
    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、firstName 和 lastName 属性的访问修饰符从 public 更改为 private。
其次，将属性 age 更改为 _age。
第三，为 _age 属性创建 getter 和 setter 方法。在 setter 方法中，在将输入年龄分配给 _age 属性之前检查其有效性。

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

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

请注意，对 setter 的调用不像常规方法那样带有括号。当你调用 person.age 时，将调用 age 设置方法。如果你分配无效的 age 值，setter 将抛出错误：

person.age = 0;

报错：

Error: The age is invalid

当你访问 person.age 时，将调用 age getter。

console.log(person.age);

以下代码将 getter 和 setter 添加到 firstName 和 lastName 属性。

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

    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}`;
    }
}

更多 TypeScript Getter/Setter 示例

正如你从代码中看到的，当你想要在将数据分配给属性之前验证数据时，setter 非常有用。此外，你还可以执行复杂的逻辑。

下面展示了如何为 fullName 创建 getter 和 setter。

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 方法返回名字和姓氏的串联。
setter 方法接受字符串作为全名，格式为：first last，并将第一部分分配给名字属性，第二部分分配给姓氏属性。

现在，你可以像常规类属性一样访问 fullname 的 setter 和 getter：

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

概括

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

TypeScript Getter 和 Setter

TypeScript Getter 和 Setter 简介​

更多 TypeScript Getter/Setter 示例​

概括​

TypeScript Getter 和 Setter 简介

更多 TypeScript Getter/Setter 示例

概括