Typescript——类的使用

类的使用

在早期的JavaScript开发中我们需要通过函数和原型链来实现类和继承，但是从ES6开始，引入了class、extends关键字，可以更加方便的使用类以及实现继承。而TypeScript作为JavaScript的超集，也是支持使用class关键字的并且还可以对类的属性和方法等进行类型检测。但是实际上在JavaScript的开发过程中，我们更加习惯于函数式编程：

（1）在React开发中，目前更多使用的是函数式组件以及结合Hook的开发模式。

（2）在Vue3开发中，目前也更加推崇使用 Composition API，其实也是参考react的。

但是在封装某些业务的时候，类具有更强大的封装性，所以我们也还是需要一下掌握它们。

类的基本使用

当我们定义好一个类后，我们便可以使用下面两种方式去给类添加属性了，但是初始化时是有以下两种方式的：

（1）定义属性时声明类型的同时初始化。

class Person {
   
  name: string = "kobe"
  age: number = "24"
    
  eating() {
   
    console.log(this.name + " eating")
  }
}

const p = new Person()
console.log(p.name)
console.log(p.age)
p.eating()

（2）通过constructor构造函数来初始化

class Person {
   
  //可以给属性添加类型，默认情况下为any类型
  name: string
  age: number

  constructor(name: string, age: number) {
   
    this.name = name
    this.age = age
  }

  eating() {
   
    console.log(this.name + " eating")
  }
}

const p = new Person("why", 18)
console.log(p.name)
console.log(p.age)
p.eating()

类的继承

面向对象的其中一大特性就是继承，继承不仅仅可以减少我们的代码量，也是多态的使用前提，我们使用extends关键字来实现继承，子类中使用super来访问父类，当我们使用上面第2种方式去初始化数据时，那么父类便可以通过在子类中使用super()去调用父类的constructor从而初始化父类中的属性，当然了我们也可以利用super再次调用或者重写父类中的方法。

//父类
class Person {
   
  name: string
  age: number

  constructor(name: string, age: number) {
   
    this.name = name
    this.age = age
  }

  eating()