TypeScript 中的方法重写?
typescriptserver side programmingprogramming更新于 2025/8/9 6:22:17
方法重写是指在继承的类中编写方法的新定义，同时保持方法名称、参数和返回类型不变。在本教程中，我们将学习 TypeScript 中的方法重写。
继承是面向对象编程的四大支柱之一。面向对象编程的方法重写特性对继承很有帮助。例如，我们可以在父类中定义方法，然后在基类中重新定义具有相同名称、参数和返回类型的方法，并执行不同的代码，这就是方法重写的作用。
语法
用户可以按照以下语法学习方法重写。
class Vehicle {
// 父类中的信息方法
info(): void {
console.log("The object is the vehicle.");
}
}
class car extends Vehicle {
// 在基类中重写相同的信息方法
info(): void {
console.log("The object is a car.");
}
}
let new_vehicle = new car();
new_vehicle.info();
在上述语法中，用户可以看到我们在父类中定义了 info() 方法。此外，我们在基类中也定义了同名的 info 方法。此外，我们创建了基类的对象并调用了 info() 方法，该方法将调用基类的 info() 方法。
步骤
步骤 1 - 使用 class 关键字创建车辆类。
步骤 2 - 在车辆类中定义 info() 方法，该方法打印消息"该对象是车辆"。
步骤 3 - 创建汽车类，它扩展了车辆类。另外，在 car 类中定义一些变量。
步骤 4 − 此外，在 car 类中重写 Vehicle 类的 info() 方法，该方法提供有关汽车而非一般车辆的信息。
步骤 5 − 在 car 类中创建 get_size() 方法。
步骤 6 − 最后，创建 car 类的对象，并通过将该对象作为引用来调用 info() 和 get_size() 方法。
示例 1
在下面的示例中，car 类被 Vehicle 类继承，后者重写了 Vehicle 类的 info() 方法。
class Vehicle {
info(): void {
console.log("The object is the vehicle.");
}
}
class car extends Vehicle {
name: string = "car";
color: string = "Black";
size: number = 6;
info(): void {
console.log("The object is a " + this.name);
console.log("The color of the car is " + this.color);
}
get_size(): void {
console.log("The length of the car in the feet is " + this.size);
}
}
let new_vehicle = new car();
// 调用 car 类的 info 方法
new_vehicle.info();
// 调用 car 类的 get_size() 方法
new_vehicle.get_size();
编译后，它将生成以下 JavaScript 代码 -
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Vehicle = /** @class */ (function () {
function Vehicle() {
}
Vehicle.prototype.info = function () {
console.log("The object is the vehicle.");
};
return Vehicle;
}());
var car = /** @class */ (function (_super) {
__extends(car, _super);
function car() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.name = "car";
_this.color = "Black";
_this.size = 6;
return _this;
}
car.prototype.info = function () {
console.log("The object is a " + this.name);
console.log("The color of the car is " + this.color);
};
car.prototype.get_size = function () {
console.log("The length of the car in the feet is " + this.size);
};
return car;
}(Vehicle));
var new_vehicle = new car();
// 调用 car 类的 info 方法
new_vehicle.info();
// 调用 car 类的 get_size() 方法
new_vehicle.get_size();
输出
上述代码将产生以下输出 -
The object is a car The color of the car is Black The length of the car in the feet is 6
示例 2
在下面的示例中，我们创建了 employee 类，并用 employee 类扩展了 men 类。employee 类的 about() 方法告知了我们关于员工的一般信息。
men 类的 about 方法通过向 about() 方法添加一些额外信息覆盖了 employee 类的 about() 方法。此外，我们在 men 类的 about() 方法中使用 super 关键字调用了 employee 类的 about() 方法。
// 创建包含 about 方法的 employee 类
class Employee {
about(): void {
console.log("Inside the employee class.");
}
}
// Men 类重写 employee 类的 about 方法
class men extends Employee {
gender: string = "Male";
about(): void {
// 调用 employee 类的 about 方法
super.about();
console.log("The gender of the Employee is " + this.gender);
}
}
// 调用 men 类的 about 方法
let new_men = new men();
new_men.about();
编译后，它将生成以下 JavaScript 代码 -
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
// 创建包含 about 方法的员工类
var Employee = /** @class */ (function () {
function Employee() {
}
Employee.prototype.about = function () {
console.log("Inside the employee class.");
};
return Employee;
}());
// Men 类重写 employee 类的 about 方法
var men = /** @class */ (function (_super) {
__extends(men, _super);
function men() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.gender = "Male";
return _this;
}
men.prototype.about = function () {
// 调用员工类的 about 方法
_super.prototype.about.call(this);
console.log("The gender of the Employee is " + this.gender);
};
return men;
}(Employee));
// 调用 men 类的 about 方法
var new_men = new men();
new_men.about();
输出
上述代码将产生以下输出 -
Inside the employee class. The gender of the Employee is Male
示例 3
在下面的例子中，我们用相同的参数和返回类型重写了 multiply 类中 sum 类的 operation() 方法。
class sum {
operation(a: number, b: number): number {
return a + b;
}
}
class multiply extends sum {
// 通过保持参数和返回类型相同来覆盖操作方法
operation(a: number, b: number): number {
return a * b;
}
}
let multi = new multiply();
let result = multi.operation(10, 20);
console.log(
"Result after performing calling the operation method is " + result
);
编译后，它将生成以下 JavaScript 代码 -
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var sum = /** @class */ (function () {
function sum() {
}
sum.prototype.operation = function (a, b) {
return a + b;
};
return sum;
}());
var multiply = /** @class */ (function (_super) {
__extends(multiply, _super);
function multiply() {
return _super !== null && _super.apply(this, arguments) || this;
}
// 通过保持参数和返回类型相同来覆盖操作方法
multiply.prototype.operation = function (a, b) {
return a * b;
};
return multiply;
}(sum));
var multi = new multiply();
var result = multi.operation(10, 20);
console.log("调用操作方法后的结果是 " + result);
输出
上述代码将产生以下输出 -
调用操作方法后的结果是 200
用户学习了如何在 TypeScript 中重写方法。在第一个示例中，用户学习了如何在基类中简单地重写父类方法。在第二个示例中，用户学习了如何在重写方法的同时调用超类的方法。在第三个示例中，用户学习了如何重写带参数的方法。
