ts：用加减乘除方法配合展示类的继承（extends）

1 主要内容说明

类的继承，使用关键字extends继承。子类继承父类，子类可以继承父类的参数和方法，同时添加新的参数和方法。对于一个项目，原本有一些简单的功能，但根据市场发展的需要，需要对项目更新迭代，添加更多的参数和方法，实现更多的功能，并且原项目数据和方法部分需要保留，这时候就可以使用类的继承来开发新方法和功能。对于子类，类中的构造函数使用super关键字继承父类的参数，继承后就可以使用父类的参数。方法的继承格式为，在子类方法中设置super.way_FL()，便可继承父类方法，其中way_FL为父类中的方法。

2 例子

• 本文选了一个简单的例子，来展示继承的类从简到繁的过程。下边源码1为简单的创建的一个类Calculate，里面设置两参数，只有两参数相加的加法功能。
• 源码2，类名为Count_1，继承了父类源码1的Calculate类的参数和方法。此时我们函数实例化，使用的是方法way2，而使用效果为继承了父类way1的加法功能。
• 源码3，类名为Count_2，在继承了父类源码1的Calculate类的参数和方法的同时，使用参数，增加减法、乘法、除法的功能。加法则继承于父类。
• 源码4，类名为Count_3，继承父类源码3的Count_2类，继承了两数的加减乘除方法。在原有继承上，添加一新参数c，用于实现三数的加减乘除方法。

2.1 基类的创建

简单的创建的一个类Calculate，里面设置两参数，只有两参数相加的加法功能way1。

2.1.1 源码1 （基类的创建）

class Calculate {a: number; // 第一个数字b: number; // 第二个数字constructor(a: number, b: number) {this.a = a; // 初始化第一个数字this.b = b; // 初始化第二个数字}way1(): string {return `${this.a} + ${this.b} = ${this.a + this.b}`; // 返回加法结果}
}// 测试 Calculate 类
let result = new Calculate(764, 467);
console.log(result.way1());

2.1.2 源码1运行效果

2.2 继承基类的参数和方法

新建Count_1类，继承了父类源码1的Calculate类的参数和方法。此时我们函数实例化，使用的是方法way2，效果为继承了父类way1的加法功能。子类中的构造函数部分，super(值1，值2)，相当于初始化父类的值a=值1，b=值2。若是值1和值2调换，则函数会根据输入的参数的顺序进行逻辑运算。如正常函数实例化输入参数为（11,5），逻辑运算为11+5，若继承时构造函数部分，调换位置，如 super(值2，值1)时，逻辑运算变为5+11。当然加法无影响，若是减法和除法，结果则会改变。

2.2.1 源码2（继承基类的参数和方法）

class Calculate {a: number; // 第一个数字b: number; // 第二个数字constructor(a: number, b: number) {this.a = a; // 初始化第一个数字this.b = b; // 初始化第二个数字}way1(): string {return `${this.a} + ${this.b} = ${this.a + this.b}`; // 返回加法结果}
}// 测试 Calculate 类
// let result = new Calculate(764, 467);
// console.log(result.way1());class Count_1 extends Calculate {constructor(a_1: number, b_1: number) {super(a_1, b_1); // 调用父类构造函数}way2(): string { // 继承加法return super.way1(); // 调用父类的加法方法}
}// 测试 Count_1 类
let result = new Count_1(764, 467);
console.log(result.way2());

2.2.2 源码2运行效果

2.3 继承基类，添加新方法

新建Count_2类，继承了父类源码1的Calculate类的参数和方法的同时，使用参数a和b，增加减法way4、乘法way5、除法way6的功能。加法way3则继承于父类way1。

• 需要注意的是，除法的被除数不能为0。

2.3.1 源码3（继承基类，添加新方法）

class Calculate {a: number; // 第一个数字b: number; // 第二个数字constructor(a: number, b: number) {this.a = a; // 初始化第一个数字this.b = b; // 初始化第二个数字}way1(): string {return `${this.a} + ${this.b} = ${this.a + this.b}`; // 返回加法结果}
}// 测试 Calculate 类
// let result = new Calculate(764, 467);
// console.log(result.way1());class Count_2 extends Calculate {constructor(a_2: number, b_2: number) {super(a_2, b_2); // 调用父类构造函数}way3(): string { // 继承加法return super.way1(); // 调用父类的加法方法}// 添加其他方法way4(): string { // 减法return `${this.a} - ${this.b} = ${this.a - this.b}`; // 返回减法结果}way5(): string { // 乘法return `${this.a} * ${this.b} = ${this.a * this.b}`; // 返回乘法结果}way6(): string { // 除法if (this.b !== 0) {return `${this.a} / ${this.b} = ${this.a / this.b}`; // 返回除法结果} else {return "被除数不能为0！"; // 返回错误信息}}
}// 测试 Count_2 类
let result = new Count_2(764, 467);
console.log(result.way3());
console.log(result.way4());
console.log(result.way5());
console.log(result.way6());

2.3.2 源码3运行效果

2.4 继承基类，添加新参数、方法

源码3的Count_2类只是两数的加减乘除法，在下边源码4的Count_3类中，在原有源码3的两数加减乘除方法的基础上，添加一新参数c，用于增加实现三数的加减乘除法。

• 需要注意的是，除法的被除数不能为0。

2.4.1 源码4（继承基类，添加新参数、方法）

class Calculate {a: number; // 第一个数字b: number; // 第二个数字constructor(a: number, b: number) {this.a = a; // 初始化第一个数字this.b = b; // 初始化第二个数字}way1(): string {return `${this.a} + ${this.b} = ${this.a + this.b}`; // 返回加法结果}
}class Count_2 extends Calculate {constructor(a_2: number, b_2: number) {super(a_2, b_2); // 调用父类构造函数}way3(): string { // 继承加法return super.way1(); // 调用父类的加法方法}// 添加其他方法way4(): string { // 减法return `${this.a} - ${this.b} = ${this.a - this.b}`; // 返回减法结果}way5(): string { // 乘法return `${this.a} * ${this.b} = ${this.a * this.b}`; // 返回乘法结果}way6(): string { // 除法if (this.b !== 0) {return `${this.a} / ${this.b} = ${this.a / this.b}`; // 返回除法结果} else {return "被除数不能为0！"; // 返回错误信息}}
}// 测试 Count_2 类
// let result = new Count_2(764, 467);
// console.log(result.way3());
// console.log(result.way4());
// console.log(result.way5());
// console.log(result.way6());class Count_3 extends Count_2 {c: number; // 第三个数字constructor(a_3: number, b_3: number, c_3?: number) {super(a_3, b_3); // 调用父类构造函数this.c = c_3; }way3_3(): string {if (this.c === undefined) {return super.way3(); // 如果 c 为 0，则调用父类的 way3} else {return `${this.a} + ${this.b} + ${this.c} = ${this.a + this.b + this.c}`; // 返回三数相加的结果}}way4_3(): string {if (this.c === undefined) {return super.way4(); // 如果 c 为 0，则调用父类的 way4} else {return `${this.a} - ${this.b} - ${this.c} = ${this.a - this.b - this.c}`; // 返回三数相减的结果}}way5_3(): string {if (this.c === undefined) {return super.way5(); // 如果 c 为 0，则调用父类的 way5} else {return `${this.a} * ${this.b} * ${this.c} = ${this.a * this.b * this.c}`; // 返回三数相乘的结果}}way6_3(): string {// 检查 c 是否未定义if (this.c === undefined) {return super.way6(); // 如果未定义，调用父类的 way6 方法进行除法计算} else {// 如果 c 已定义，则进一步检查其值if (this.c === 0) {return "被除数不能为0！"; // 如果 c 为 0，输出错误信息} else {// 如果 c 不为 0，进行三数相除的计算return `${this.a} / ${this.b} / ${this.c} = ${this.a / this.b / this.c}`;}}}}
// 测试 Count_3 类
let result1 = new Count_3(764, 467);
let result2 = new Count_3(764, 467, 76);console.log(result1.way3_3()); // 调用 way3_3
console.log(result1.way4_3()); // 调用 way4_3
console.log(result1.way5_3()); // 调用 way5_3
console.log(result1.way6_3()); // 调用 way6_3console.log(`\n分隔行-------------------------------\n`);console.log(result2.way3_3()); // 调用 way3_3
console.log(result2.way4_3()); // 调用 way4_3
console.log(result2.way5_3()); // 调用 way5_3
console.log(result2.way6_3()); // 调用 way6_3

2.4.2 源码6运行效果

3.结语

项目的开发是不是会有很多的框架示范类，其中包含着开发的参数和功能需求，我们需要在此基础上，拓展添加新参数和新功能。或者开发的项目，需要更新迭代，也是需要原有数据方法基础，开发新的方法和功能。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

4.定位日期

2024.11.3；
10:39；