TypeScript基础入门 - 类 - 存取器

简介: 转载TypeScript基础入门 - 类 - 存取器项目实践仓库https://github.com/durban89/typescript_demo.gittag: 1.1.2为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

转载

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

 

目录
相关文章
|
5天前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
34 3
|
15天前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
4月前
|
JavaScript 前端开发 程序员
TypeScript 类
TypeScript 类
|
1月前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
19 0
typeScript进阶(13)_类与注意事项(八项特性)
|
1月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
3月前
|
JavaScript 前端开发
TypeScript(七)类
TypeScript(七)类
33 0
|
4月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
28 0
|
4月前
|
JavaScript
TypeScript类
TypeScript类
|
4月前
|
JavaScript Java C#
typescript 类类型
typescript 类类型
|
1月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
36 1
typeScript进阶(9)_type类型别名