引言
你好！作为一名开发者，我们经常在构建复杂应用时需要通过继承来复用代码。在这个过程中，一个核心的问题是：当我们在 TypeScript 中创建一个子类时，该如何正确地初始化父类（基类）的数据呢？
在这篇文章中，我们将深入探讨如何在子类中调用基类的构造函数。我们将一起学习 super() 关键字的用法，探讨它背后的工作机制，并通过多个丰富的代码示例来掌握这一技能。无论你是初学者还是希望巩固知识的开发者，这篇文章都将帮助你理解 TypeScript 继承的核心概念。
你将学到什么？
- 理解 TypeScript 中类继承的基本概念。
- 掌握使用
super()关键字调用父类构造函数的标准方法。 - 学习参数传递机制以及构造函数执行顺序。
- 探索多种实际应用场景，从简单的数据模型到更复杂的几何计算。
- 了解开发中的常见陷阱及其解决方案。
—
基础概念：继承与构造函数
在 TypeScript 中，继承允许我们创建一个新类（子类/派生类），该类继承现有类（父类/基类）的属性和方法。这是面向对象编程（OOP）的基石之一，极大地促进了代码的重用。
为了实现继承，我们使用 INLINECODE9b2e8ebb 关键字。但是，仅仅继承属性是不够的，我们通常还需要初始化这些属性。这就是构造函数（INLINECODE128ee65f）发挥作用的地方。
为什么我们需要 super()？
当子类拥有自己的构造函数时，它必须在构造函数的最开始调用父类的构造函数。这是 TypeScript 和 JavaScript 强制执行的规则。为什么？因为父类“不知道”子类的存在，父类需要先完成自己的初始化逻辑，子类才能在此基础上进行扩展或修改。
我们使用 INLINECODE4ee7b020 关键字来实现这一点。INLINECODE8453ec63 实际上引用了父类的原型或构造函数，具体取决于上下文。在构造函数中，它专门用于调用父类的构造函数。
核心语法
让我们先通过一个直观的“人类”与“详细信息”的例子来看看基本的语法结构。
示例 1：基本的人员信息管理
在这个场景中，我们有一个基类 INLINECODE87c71c42，它包含最基本的姓名和职业信息。然后我们创建一个子类 INLINECODEb97123ef，它继承自 Person 并添加了展示详细信息的功能。
// 定义基类 Person
class Person {
// 定义属性
Name: string;
Profession: string;
// 基类构造函数
constructor(name: string, profession: string) {
// 初始化基类属性
this.Name = name;
this.Profession = profession;
}
}
// 定义子类 Details，继承自 Person
class Details extends Person {
// 子类可以定义自己的额外属性
// 注意：这里为了演示，我们虽然没写新属性，但在构造函数中使用了 super
// 子类构造函数
constructor(name: string, profession: string) {
// 核心步骤：调用基类构造函数
// 我们必须传递父类所需的参数
super(name, profession);
// 虽然 super 已经初始化了父类属性，但在 TypeScript 中，
// 我们通常不需要在这里重复写 this.Name = name，
// 除非我们要修改继承来的值（这种情况很少见，且通常是逻辑异味）。
// 在这个特定示例中，为了演示代码流程，我们保留原样。
}
// 子类特有的方法
details(): string {
// 使用继承来的属性
return `${this.Name} 的职业是 ${this.Profession}`;
}
}
// 创建类的实例
const data = new Details("张三", "Android 开发工程师");
const data2 = new Details("李四", "Web 开发工程师");
// 调用方法并打印结果
console.log(data.details());
console.log(data2.details());
输出结果：
张三 的职业是 Android 开发工程师
李四 的职业是 Web 开发工程师
代码深度解析：
- INLINECODE9cce6cf2: 这行代码建立了继承关系。INLINECODE89132b77 现在拥有了
Person的所有非私有成员。 - INLINECODEaeae7a7d: 这是关键点。在 INLINECODE2d76c49a 的构造函数被调用时，如果不先调用 INLINECODE99e85ca0，TypeScript 编译器会直接报错。这确保了 INLINECODEf22f4151 的 INLINECODE5e7dab59 和 INLINECODE9fe3af2e 先被赋值。
- 执行顺序: 当 INLINECODEea440bba 执行时，JavaScript 引擎首先调用 INLINECODE2733ffd9 的构造函数，遇到 INLINECODEbd364018 后，立即跳转去执行 INLINECODEf7ce9c52 的构造函数。只有当 INLINECODEccbb58d7 的构造函数执行完毕后，才会返回 INLINECODE3aaa5345 的构造函数继续执行剩余代码。
—
进阶实践：几何图形计算
让我们看一个稍微不同但更侧重于数学计算的例子。在这个例子中，我们将计算正方形的面积。
示例 2：正方形面积计算器
这里，INLINECODEb0331f93 类定义了边长，而 INLINECODE07a707fb 类继承它并专门负责计算和格式化输出。
// 基类：正方形
class Square {
// 边长属性
side: number;
// 构造函数初始化边长
constructor(side: number) {
this.side = side;
}
}
// 派生类：面积计算
class Area extends Square {
// 这里的构造函数接收边长
constructor(side: number) {
// 调用基类构造函数，初始化边长
super(side);
// 注意：这里不需要再次写 this.side = side，
// 因为 super(side) 已经在 Square 类中完成了这项工作。
}
// 计算并返回面积的方法
area(): string {
// 直接使用继承来的 this.side
const areaValue = this.side * this.side;
return `正方形的面积是: ${areaValue}`;
}
}
// 创建实例
const mySquare = new Area(7);
// 打印结果
console.log(mySquare.area());
输出结果：
正方形的面积是: 49
实战见解：
在这个例子中，我们观察到了一种更清晰的代码模式。INLINECODE75c15e62 类的构造函数只需要负责将参数传递给 INLINECODE3cdbd553，而不需要重复赋值操作。这是推荐的做法。如果你发现自己在子类构造函数中重复赋值所有父类属性，通常意味着你可以简化代码，完全依赖父类的初始化逻辑。
—
扩展场景：添加新属性
在实际开发中，子类通常会比父类拥有更多的属性。这展示了继承真正的强大之处：扩展。
让我们升级之前的 Person 类。
示例 3：员工薪资系统
假设我们仍然有一个基础的 INLINECODE187821bc 类，但现在我们要创建一个 INLINECODEa5d8b37c（员工）类，它不仅继承姓名，还增加了 INLINECODE6fbccbd9（员工ID）和 INLINECODEbc53d766（薪水）。
// 基类
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
introduce(): void {
console.log(`你好，我是 ${this.name}`);
}
}
// 子类：员工
class Employee extends Person {
// 子类新增属性
employeeId: number;
salary: number;
// 子类构造函数需要包含父类参数和子类参数
constructor(name: string, id: number, salary: number) {
// 1. 必须先调用 super，传入父类需要的 name
super(name);
// 2. 然后初始化子类自己的属性
this.employeeId = id;
this.salary = salary;
}
showDetails(): void {
// 调用父类方法
this.introduce();
// 输出子类特有信息
console.log(`工号: ${this.employeeId}, 薪资: $${this.salary}`);
}
}
const emp1 = new Employee("王五", 1001, 50000);
emp1.showDetails();
输出结果：
你好，我是 王五
工号: 1001, 薪资: $50000
关键点解析：
- 参数扩展: INLINECODEa16070a9 的参数列表变长了，包含了 INLINECODEeafc4529（给父类用）和 INLINECODEcd5d6811, INLINECODEe15202ba（给自己用）。
- 初始化顺序: 先 INLINECODEf2bcc53c 让父类把名字存好，然后我们再存 INLINECODE4828cee1 和 INLINECODE69db726c。如果先存子类属性再调 INLINECODEc8ce911e，虽然理论上某些 JS 引擎可能允许，但在 TypeScript 中这违反了
super必须第一时间的原则，且逻辑上不安全。
—
常见错误与最佳实践
作为经验丰富的开发者，我们不仅要学会怎么做，还要知道不要做什么。
1. 忘记调用 super()
如果你在子类中写了构造函数，却忘记调用 super()，TypeScript 会报错：
错误代码：
class Child extends Parent {
constructor() {
// 报错: Constructors for derived classes must contain a ‘super‘ call.
}
}
解决方案: 确保在构造函数逻辑的第一行写上 super(...)。
2. 使用 INLINECODE00b2ade8 在 INLINECODEfddc6a9d 之前
在调用 INLINECODE8160aead 之前，你不能访问 INLINECODE8a3ee505。因为此时父类还没有初始化，this 处于“未初始化”状态。
错误代码：
class Child extends Parent {
constructor() {
this.x = 1; // 报错: ‘super‘ must be called before accessing ‘this‘ in the constructor of a derived class.
super();
}
}
解决方案: 总是先调用父类构造函数，确保基础架构打好，再往上面添砖加瓦（访问 this）。
3. 参数匹配错误
如果父类构造函数需要 2 个参数，你传递了 1 个或 3 个，虽然代码可能编译通过（取决于类型定义），但运行时逻辑可能会出错或无法正确初始化。TypeScript 的类型系统会在这方面帮你把关，但你需要确保传递的参数在逻辑上是合理的。
4. 省略构造函数
如果子类不需要任何特殊的初始化逻辑，并且父类构造函数参数也是默认可处理的（或者子类完全不需要额外构造函数），你其实可以省略子类的构造函数。JavaScript 会自动为你生成一个构造函数，并自动调用 super()，并传递所有参数。
简化示例：
class SimpleEmployee extends Person {
// 不写 constructor，系统自动生成并调用 super()
work() {
console.log(`${this.name} 正在工作...`);
}
}
—
总结与后续步骤
在这篇文章中，我们一起深入探讨了 TypeScript 中通过 super() 调用基类构造函数的各种细节。我们从基本的语法入手，学习了为什么要这样做，并通过人员信息、几何计算和员工系统三个实战案例，从浅入深地掌握了其用法。
核心要点
- 强制规则: 在子类构造函数中，
super()必须是第一条语句（如果显式定义了构造函数）。 - 参数传递: 确保传递给
super()的参数类型和数量与父类构造函数的定义相匹配。 - 初始化顺序: 先父后子。父类先建立好地基，子类才能盖楼。
- 代码复用: 尽量让父类处理通用属性的初始化，子类只需专注于传递参数和初始化自己特有的属性。
下一步建议
为了进一步提升你的技能，建议你尝试以下练习：
- 尝试创建一个 INLINECODE4ed23acb（车辆）基类，然后创建 INLINECODEf2fdede3（汽车）和
Motorcycle（摩托车）子类，练习不同的属性初始化。 - 研究 访问修饰符（如 INLINECODE253dbdc5, INLINECODE2ae2e874, INLINECODE8adc8734）是如何影响我们在子类中访问父类成员的。特别是 INLINECODEf7c03dd3 成员，它在继承中非常有用。
- 探索 Getter 和 Setter，看看如何在继承体系中控制属性的读写逻辑。
希望这篇文章能帮助你更好地理解 TypeScript 的继承机制。继续编写优秀的代码，保持好奇！