TypeScript基础入门 - 类 - 存取器

最新推荐文章于 2024-07-08 14:20:24 发布

转载最新推荐文章于 2024-07-08 14:20:24 发布 · 1.1k 阅读

文章标签：

#TypeScript #类

TypeScript 专栏收录该内容

93 篇文章

订阅专栏

本文介绍了TypeScript中存取器(getters/setters)的概念及其应用。通过一个具体的员工类例子，展示了如何通过存取器控制对类成员的访问，并确保了只有在密码验证成功的情况下才能修改员工的全名。

转载

TypeScript基础入门 - 类 - 存取器

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.1.2

为了保证后面的学习演示需要安装下ts-node，这样后面的每个操作都能直接运行看到输出的结果。

npm install -D ts-node

后面自己在练习的时候可以这样使用

npx ts-node 脚本路径

类

存取器

TypeScript支持通过getters/setters来截取对对象成员的访问。它能帮助你有效的控制对对象成员的访问。下面来看如何把一个简单的类改写成使用 get和 set。首先，我们从一个没有使用存取器的例子开始

class Employee {
    fullName: string    
}

let employee = new Employee();
employee.fullName = "durban zhang";

if (employee.fullName) {
    console.log(employee.fullName);
}

运行后结果如下

$ npx ts-node src/classes_4.ts
durban zhang

我们可以随意的设置 fullName，这是非常方便的，但是这也可能会带来麻烦。

下面这个版本里，我们先检查用户密码是否正确，然后再允许其修改员工信息。我们把对 fullName的直接访问改成了可以检查密码的 set方法。我们也加了一个 get方法，让上面的例子仍然可以工作。

let passcode = 'pass';
class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(name: string) {
        if (passcode && passcode === 'pass') {
            this._fullName = name;
        } else {
            console.log('授权失败');
        }
    }
}

let employee = new Employee();
employee.fullName = "durban zhang";

if (employee.fullName) {
    console.log(employee.fullName);
}

运行后结果如下

$ npx ts-node src/classes_4.ts
durban zhang

可以修改一下密码，来验证一下存取器是否是工作的。当密码不对时，会提示我们没有权限去修改员工。

对于存取器有下面几点需要注意的：

首先，存取器要求你将编译器设置为输出ECMAScript 5或更高。不支持降级到ECMAScript 3。其次，只带有 get不带有 set的存取器自动被推断为 readonly。这在从代码生成 .d.ts文件时是有帮助的，因为利用这个属性的用户会看到不允许够改变它的值。

本实例结束实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.1.3