Typescript类（class）的继承

最新推荐文章于 2025-06-03 14:20:07 发布

情非得已小猿猿

最新推荐文章于 2025-06-03 14:20:07 发布

阅读量562

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript 前端开发 ECMAScript 6+

本文链接：https://blog.csdn.net/weixin_43924228/article/details/118187481

前端开发同时被 3 个专栏收录

77 篇文章

订阅专栏

TypeScript

16 篇文章

订阅专栏

ECMAScript 6+

13 篇文章

订阅专栏

这篇博客探讨了 TypeScript 中的类继承和 super 关键字的使用。通过实例展示了如何使用 extends 关键字创建子类，并通过 super 调用父类的构造函数和方法。文章还解释了如何在子类构造函数中使用 super(name) 传递参数，并调用父类的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、extends 声明类的继承关系

class Person
构造器函数 constructor
Employee 继承 Person 属性和方法
new 关键字 Employee 实例, 赋值给变量e1
通过实例调用Person类中eat方法

class Person {
  constructor(public name: string) {
    this.name = name
  }
  eat(){
    console.log(this.name)
  }
}
// 继承Person类的属性和方法
class Employee extends Person{

}
let e1 = new Employee('yaoyao')
e1.eat()  // yaoyao

2、super 调用父类的构造函数和方法

super(name) 需要传name，否则报错
调用父类（Person2）的 constructor 构造函数
调用父类的其他方法

// super
class Person2 {
  name: string;
  constructor(name) {
    console.log("haha")
  }
  eat(){
    console.log("I’m eatting")
  }
}

class Boss extends Person2{
  constructor(name: string, public age: number){
    super(name);
    console.log("xixi")
    this.age = age
  }
  work(){
    super.eat()
    this.doWork()
  }
  private doWork(){
    console.log("I’m working")
  }
}

let b1 = new Boss('yun', 18)
b1.work()

打印结果：

// haha
// xixi
// I’m eatting
// I’m working