typescript get方法_typescript专题(六) 类及其高级应用

欢迎来到我专题文章【typescript】，更多干货内容持续分享中，敬请关注！

就是前几天，尤大神突然宣布vue3.0 pre-alpha的源码在github上开源，吓得我赶紧去围观了一下，看了下其中的源码。全是基于ts编写的，然后一脸蒙蔽的退出来了。

我太难了。。。

所以，想阅读源码，学习typescript已经是刻不容缓了。

上章回顾：

• 从0~1基于webpack搭建了一个简单的ts项目
• 介绍了装饰器在typescript中的基本使用

本章目标：

• 在ES中的类的基本使用
• ts类的存取器，及基本质是什么
• 泛型类的基本使用

在ES中的类的基本使用

在ES6之前，前端开发者想要使用面向对象编程，不得不用function 来模拟类，然后通过原型prototype去编写类的方法。具体的使用我前面的专题《JS从入门到不放弃》早有介绍，这里就不再赘述了。

自从ES6出现了，我们终于可以后端php,java,python他们那样通过class关键字来定义类了。它长这样：

class Person{ constructor(name,age){ this.name = name; this.age = age; }  say(){ console.log(this.name + 'say ...') }}

ts中的类

那么作为JS的超级的typescript，它在类的特性上都有哪些增强呢？

一、类的方法和属性成员私有化

我们在ES6中定义的类的属性和方法默认都是公共的，也就是说，实例化类的对象可以访问到类的所有的属性和方法。

从某种意义上来说，js中的类和java，C#中的类还有是一些差距的，好在typescript完美的帮我们解决了这个问题。

在typescript中，我们可以使用private 和public关键字来定义类的方法和属性成员。像这样

我们实例化一个Person类的时候，然后通过类的对象去访问类的私有属性时，ts的语法已经通不过了。提示信息已经说的很清楚。

二、类的属性的存取器(getter,setter)

了解过java和C#的都知道，在类中可以给属性添加get和set方法，当我们获取和设置属性的时候，可以触发对应的方法。

那么刁的功能，typescript肯定也不能落下呀。于是它也搞了一个出来，我们来看下它怎么用

接下来我们实际运行一下

错了？

这是因为默认ts会将它编译成es3，这里我们在编译的时候需要指定一下target参数。我们需要这样去编译

编译的时候记得指明 --target es5

可以看到，当我们获取和设置了age 属性的时候，对应的get和set方法都被触发了。

一看到这个get和set,很容易联想到vue的数据劫持也有一个get 和set方法，功能类似，我们不妨去看看ts编译后的代码吧

哈哈哈，看到这段代码，熟悉vue原理的都能明白，它就是这么干的。

不得不说typescript 厉害呀

泛型类

前面我说到了泛型的基本用法，普通的ts约束只能限制变量为某一种类型，而这种往往不能满足一些特有的需求，还好有泛型来救场

泛型类的定义，我们只需要在类名后加了泛型即可，像这样

我们定义了一个泛型类，并且在实例化的时候指定类型为number 当我们add 一个字符串的时候，编辑器已经给我们详细的提示了。

总结：

• typescript针对es6中的类做了一些功能增强。
• typescript中的class 中的get 和set的使用，内部原理其实就是使用的ES5的Object.defineProperty来实现的。
• 泛型类的基本使用

这里是【畅哥聊技术】的typescript专题系列。更多内容持续更新中。。。

未完待续。