TypeScript —— 类的使用

58 阅读2分钟

类的使用

在早期的JavaScript开发中(ES5)我们需要通过函数和原型链来实现类和继承,从ES6开始,引入了class关键字,可以更加方便的定义和使用类。TypeScript作为JavaScript的超集,也是支持使用class关键字的,并且还可以对类的属性和方法等进行静态类型检测。实际上在JavaScript的开发过程中,我们更加习惯于函数式编程:比如React开发中,目前更多使用的函数组件以及结合Hook的开发模式;比如在Vue3开发中,目前也更加推崇使用 Composition API。但是在封装某些业务的时候,类具有更强大封装性,所以我们也需要掌握它们。

类的定义我们通常会使用class关键字:在面向对象的世界里,任何事物都可以使用类的结构来描述;类中包含特有的属性和方法。

类的定义

我们来定义一个Person类,使用class关键字来定义一个类。我们可以声明类的属性:在类的内部声明类的属性以及对应的类型。如果类型没有声明,那么它们默认是any的。我们也可以给属性设置初始化值。在默认的strictPropertyInitialization模式下面我们的属性是必须初始化的,如果没有初始化,那么编译时就会报错。如果我们在strictPropertyInitialization模式下确实不希望给属性初始化,可以使用 name!: string语法。类可以有自己的构造函数constructor,当我们通过new关键字创建一个实例时,构造函数会被调用。构造函数不需要返回任何值,默认返回当前创建出来的实例。类中可以有自己的函数,定义的函数称之为方法。

class Person {
    name!: string
    age: number
    
    constructor(name: string, age: number) {
        this.age = age
    }
    
    running() {
        console.log(this.name + " running")
    }
    
    eating() {
        console.log(this.age + " eating")
    }
}

类的继承

面向对象的其中一大特性就是继承,继承不仅仅可以减少我们的代码量,也是多态的使用前提。我们使用extends关键字来实现继承,子类中使用super来访问父类。

我们来看一下Student类继承自Person。Student类可以有自己的属性和方法,并且会继承Person的属性和方法。在构造函数中,我们可以通过super来调用父类的构造方法,对父类中的属性进行初始化。

class Student extends Person {
    sno: number
    constructor(name: string, age: number, sno: number) {
        super(name, age)
        this.sno = sno
    }
    studying() {
        console.log(this.name + " studying")
    }
    eating() {
        console.log("student studying")
    }
    running() {
        super.running()
        console.log("student running")
    }
}