前言
传统的JavaScript中,使用的是基于原型的继承方式来使用类,虽然在ES6中明确提出了类关键字,但是支持度还不高。TypeScript允许你直接使用ES6的类语法,并且实现了各大浏览器和平台的支持。
一、基本使用
class Person {
name: string
constructor(name: string) {
this.name = name;
}
}
然后这样使用这个类:
let mss = new Person("mss");
console.log(mss.name);
// mms
二、类的继承
定义基础类
class Animal {
name: string
constructor(name: string) {
this.name = name;
}
move(speed: number = 0) {
console.log(`${this.name}移动了${speed}`);
}
}
定义继承类,并且使用继承类重写基础类的方法
class Cat extends Animal {
constructor(name: string) {
super(name)
}
move(speed: number = 10) {
super.move(speed);
}
}
然后你这样使用继承类:
let cat = new Cat("🐈");
cat.move(20);
// 🐈移动了20
上面的例子就是很简单的使用extends
实现类继承的例子,我们在继承类的内部使用super
关键字改写了基础类的move
方法。
三、Public, private, and protected
在其他的强类型语言中,有public
等关键字标记变量的使用范围,TypeScript中也提供了这些关键字。
1.public
public
关键字是标记变量或者方法是公用的,不管在父类和子类都能使用。在TypeScript中默认就是public
,也就是当你没有使用任何范围关键字修饰,默认就是公用的变量和方法,当然你也可以显示的使用puclic
声明。
class aAnimal {
public name: string
public constructor(name:string) {
this.name = name;
}
public move(speed: number) {
console.log(speed);
}
}
然后可以定义继承类:
class Dog extends aAnimal {
constructor(name: string) {
super(name);
}
}
我们可以在基础类和继承类中都可以访问到name
属性:
// 基础类可以访问
console.log(aAnimal.name);
// 继承类也可以访问
let dog = new Dog("mss");
console.log(dog.name);
// mss
2.private
private
是用来标记一个类中私有变量的关键字,一旦使用private
标记,表示申明了该变量是类私有的,只能在类中进行访问。
基础类
class sAnimal {
private name: string;
constructor(theName: string) {
this.name = theName;
}
}
继承类:
class Snake extends sAnimal {
constructor(name: string) {
super(name);
}
}
然后试着去访问继承类中的name
属性:
class Snake extends sAnimal {
constructor(name: string) {
super(name);
// 这里访问基础类的name属性
console .log(super.name);
}
}
发现都不能访问,也应证了确实只能在基础类类中进行访问。
3.protected
protected
关键字标记的变量在基础类的子类和衍生类中都能访问。比如把上面的例子中provate
改为protected
:
class sAnimal {
protected name: string;
constructor(theName: string) {
this.name = theName;
}
}
class Snake extends sAnimal {
constructor(name: string) {
super(name);
// 这里可以正常访问
console .log(super.name);
}
}
3.readonly
readonly
关键字用来修饰只读属性
class OtherPerson {
readonly name: string;
constructor(name: string) {
this.name = name;
}
}
let me = new OtherPerson("mss");
// me.name = ''
当我们试图设置me
实例的name
属性时,TypeScript会报错,因为我们使用了readonly
关键字描述了只读属性。
同时,TypeScript也允许在申明的时候同时初始化参数:
class OtherPerson {
readonly age: number = 18
constructor(readonly name: string) {
console.log(name);
}
}
let me = new OtherPerson("mss");
// me.name = ''
这样做也是合理的,其他如public
等修饰符也可以在声明变量的同时初始化,用法和这个例子是一致的。
四、访问器属性
和JavaScript中一样,TypeScrip中也提供了访问器属性,使得开发者可以对对象进行更细粒度的控制。值得注意的是,一旦在对象中设置了get
和set
方法,TypeScript会默认用readonly
修饰set
和get
方法。
我们可以利用访问器属性,实现对一个输入的字符串的校验,我们首先设置了输入的长度为10位:
const maxLength = 10;
然后我们为类定义get
和set
访问器方法:
lass ValidName {
private name: string = "";
get fullName () {
return this.name;
}
set fullName (newName: string) {
if (newName && newName.length > maxLength) {
throw new Error("输入的字符串不合法!");
}
this.name = name;
}
}
当我们传入的字符串不符合长度的时候,会给我们一个友好的提示。同时,注意,访问起属性只能在编译器是ES5+的版本才能使用。
五、静态类
前面我们提到可以使用修饰符对类中的变量进行访问范围的控制,静态属性修饰符的作用也是在于此,使用static
修饰符修饰变量,可以使得该变量只能被该类直接访问。
class StaticObj {
static age: number = 18;
getAge() {
return StaticObj.age;
}
}
然后我们访问age
属性的时候,只能通过StaticObj
签名进行访问:
console.log(StaticObj.age);
// 18
六、抽象类
抽象类的行为可以有这样几个特点:
- 抽象类不能实例化,只能作为基础类供其他类继承。
- 使用
abstract
关键字定义抽象类和抽象方法,抽象方法只包括定义,不包括实现。- 基于抽象类的衍生类必须实现抽象类的抽象方法。
我们首先定义一个抽象类和抽象方法,注意抽象方法必须是在抽象类中定义:
abstract class AbstractObj {
abstract getName(): void
}
然后定一个AbstractObj
抽象类的继承类ImpleAbstractObj
class ImpleAbstractObj extends AbstractObj{
public name: string = 'mss'
public age: number = 18
// 这里实现了抽象类的getName方法
getName(): void {
console.log(this.name);
}
getAge() {
return this.age;
}
}
七、类可以当作接口使用
前面说到了接口
是TypeScript定义数据结合类型的一个虚拟结构,对于类来说,也可以当作接口
的功能。
你可以像使用接口
一样使用类
class baseObj {
name: string
}
同等功能的接口是这样定义:
interface baseObj {
name: string
}
然后这样使用:
let irObj: baseObj = {
name: 'mss'
}
八、总结
ES6之前JavaScript并没有正式的关于类的概念,ES6之后新增了class
的关键字,虽然只是基与ES5原型的语法糖,但是也算是方便了前端开发者。同时,TypeScript中引入了强类型语言中类的特性,使得JS向开发大型的项目又跨进了一步。