TypeScript 高级语法——Class

TypeScript完全支持ES2015中引入的class关键字。对于初中级前端开发人员来说class可能近乎于是一个没用的语言特性,那么为什么class会被引入?class带给我们的是一整个面向对象的体系和在服务端践行有效的面向对象的设计模式,并且相对于ES5降低了JS语言面向对象化的门槛,同时配合装饰器的使用获得依赖注入的能力。
这样我们就获得了一个最简单的类,类中包含两个数值类型字段x和y,类名称为Point使用class关键字标记,使用new关键字调用Point的构造函数创建对象pt。最简单的class使用就完成了。
class、interface、type的区别
interface和type作为TS引入的类型关键字是JS中没有的,也就是说在TS文件打包后interface和type将会消失不见。而class不一样,作为ES2015加入的关键字,class声明是有真实存在的JS实体的。
在我们引入interface和type时一定会使用type关键字标记类型导入,这样打包器就不会去执行引入的动作。但是class则不一定,当我们使用new关键字实例化类对象时就不能使用type关键字导入,会提示无法操作异常,因为被type标记的导入在打包时会被忽略掉了也就无法正常使用导入的内容。
构造函数
构造函数是仅存在于class中的一种特殊函数,构造函数无法像普通函数一样被调用,只能通过new关键字在类实例化对象时被调用一次。构造函数的责任是初始化类对象,如果省略不写则默认生成一个空的构造函数。
以上是构造函数的简单示例,当使用new操作符实例化A类对象时传入参数Taro,Taro会传入构造函数第一个参数的位置也就是name,构造函数中的this指向class实例化的对象,也就是说user的name字段值会变成Taro。在class中定义age时使用了“?:”的定义方式,标明age字段在实例化时是可空的。这种写法表示class A有两个公开字段(public),公开字段的意思是在类的实例user上可以访问到的字段。
类字段还可以指定默认值:
下面演示简写方式:
TS提供了简单写法极大的简化了类的定义,通过调节构造函数中参数的访问级别修饰词就可以达到定义公开字段或者私有字段的目的。
当我们在构造函数内调用其他函数来初始化类内字段时,TS会出现无法检测的情况,这个时候我们可以使用“!:”来标明类内字段一定会以某种方式被初始化且不为undefined。
比如我们在使用Dixie这个库的时候就会用到这种语法,因为类内的字段是Dixie负责初始化的。
在这个例子中我们可以看到在类内部的字段访问都是通过“this”进行的,所以在使用类对象时如果涉及到结构操作(const { name } = new A( )),调用时都需要为解构出来的对象绑定this。
类内字段可以用readonly标记为只读字段,这种字段只可以在构造函数内赋值或者指定直接指定初始值,被赋值后就不可再更改。