如何在 TypeScript 中创建函数重载?
函数或方法重载允许开发人员创建具有相同名称的多个函数。每个函数包含相同数量的参数，但数据类型不同。此外，重载函数的返回类型可能会有所不同。
函数重载是面向对象编程的概念。此外，TypeScript 支持 OOPS，因此我们可以轻松地在 TypeScript 中实现函数重载。此外，函数重载提供代码可重用性并帮助开发人员提高代码的可读性。
让我们通过实际示例了解函数重载的用法。例如，您创建了一个以字符串作为参数并返回字符串长度的函数。假设我们想传递一个数字作为参数;然后，我们需要通过声明一个具有相同名称的新函数并将数字作为参数来重载该函数。
语法
用户可以按照以下语法来重载该函数。
function function1(param1: string): number;
function function1(param1: number): number;
function function1(param1: any): any {
// 函数主体
}
在上述语法中，我们重载了函数1。用户可以观察到它在第一个声明中接受字符串类型的参数，在第二个声明中接受数字类型的参数。
之后，我们需要在定义函数时使用任意类型作为参数和返回类型，以支持两种类型的数字和字符串。
示例
在下面的示例中，getStrLen() 函数通过参数类型重载。getStrLen() 函数可以接受字符串或数字作为参数，并返回表示字符串长度的数字值。
用户可以看到我们如何使用 toString() 方法将数字值转换为字符串并通过 length 属性获取其长度。
function getStrLen(str: string): number;
function getStrLen(str: number): number;
function getStrLen(str: any): any {
// 如果参数是数字类型，则将其转换为字符串。
if (typeof str != "string") {
str = str.toString();
}
let length = str.length;
return length;
}
// 使用字符串和数字参数调用函数。
console.log("The string length is " + getStrLen("TutorialsPoint "));
console.log("The length of number is " + getStrLen(10));
编译后，它将生成以下 JavaScript 代码 -
function getStrLen(str) {
// 如果参数是数字类型，则将其转换为字符串。
if (typeof str != "string") {
str = str.toString();
}
var length = str.length;
return length;
}
// 使用字符串和数字参数调用函数。
console.log("The string length is " + getStrLen("TutorialsPoint "));
console.log("The length of number is " + getStrLen(10));
输出
上述代码将产生以下输出 -
The string length is 19 The length of number is 2
示例
在此示例中，我们使用严格相等运算符比较作为参数传递的值。用户可以看到，compareValues() 函数要么接受三个数字值，要么接受字符串值。
之后，我们根据所有三个参数值的比较结果返回布尔值。
function compareValues(value1: number, value2: number, value3: number): boolean;
function compareValues(value1: string, value2: string, value3: string): boolean;
function compareValues(value1: any, value2: any, value3: any): any {
if (value1 === value2 && value2 === value3) {
return true;
}
return false;
}
console.log("Are 10, 20, and 30 same? " + compareValues(10, 20, 30));
console.log("Are 10, 10, and 10 same? " + compareValues(10, 10, 10));
console.log(
"Are all three strings same? " +
compareValues("TypeScript", "TypeScript", "TypeScript")
);
编译后，它将生成以下 JavaScript 代码 -
function compareValues(value1, value2, value3) {
if (value1 === value2 && value2 === value3) {
return true;
}
return false;
}
console.log("Are 10, 20, and 30 same? " + compareValues(10, 20, 30));
console.log("Are 10, 10, and 10 same? " + compareValues(10, 10, 10));
console.log("Are all three strings same? " + compareValues("TypeScript", "TypeScript", "TypeScript"));
输出
上述代码将产生以下输出 -
is 10, 20, and 30 are same? false Are 10, 10, and 10 same? true Are all three strings same? true
示例
以下示例演示了构造函数的重载。我们创建了名为 data 的类，其中包含三种不同数据类型的属性。
我们声明了一个带有一些参数的空构造函数。在定义构造函数时，我们使用了"?"使所有参数都成为可选参数。之后，我们在构造函数中使用参数值初始化了类属性。
class data {
public prop1: string | undefined;
public prop2: number | undefined;
public prop3: boolean | undefined;
constructor();
constructor(prop1: string, prop2: number, prop3: boolean);
constructor(prop1?: string, prop2?: number, prop3?: boolean) {
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
}
getValues(): void {
console.log("The value of prop1 is " + this.prop1);
console.log("The value of prop2 is " + this.prop2);
console.log("The value of prop3 is " + this.prop3);
}
}
let object = new data("Hi There!", 87, false);
object.getValues();
// 创建对象而不传递构造函数参数。
let object1 = new data();
object1.getValues();
编译后，它将生成以下 JavaScript 代码 -
var data = /** @class */ (function () {
function data(prop1, prop2, prop3) {
this.prop1 = prop1;
this.prop2 = prop2;
this.prop3 = prop3;
}
data.prototype.getValues = function () {
console.log("The value of prop1 is " + this.prop1);
console.log("The value of prop2 is " + this.prop2);
console.log("The value of prop3 is " + this.prop3);
};
return data;
}());
var object = new data("Hi There!", 87, false);
object.getValues();
// 创建对象而不传递构造函数参数。
var object1 = new data();
object1.getValues();
输出
上述代码将产生以下输出 -
The value of prop1 is Hi There! The value of prop2 is 87 The value of prop3 is false The value of prop1 is undefined The value of prop2 is undefined The value of prop3 is undefined
在上面的输出中，用户可以观察到 object1 的所有参数值都是未定义的，因为我们在创建对象时没有向构造函数传递任何参数。
示例
在此示例中，我们将学习重载类方法。我们创建了包含overloadMethod() 方法的方法类。
overloadmethod() 将字符串或布尔值作为参数。我们创建了类的对象，并通过将对象作为引用并传递不同的参数值来调用overloadMethod()。
class methods {
public variable1: number = 543;
overloadMethod(key1: string): void;
overloadMethod(key1: boolean): void;
overloadMethod(key1: any): any {
console.log("The value of key1 is " + key1);
}
}
let methodObj = new methods();
methodObj.overloadMethod("TypeScript");
methodObj.overloadMethod(false);
编译后，它将生成以下 JavaScript 代码 -
var methods = /** @class */ (function () {
function methods() {
this.variable1 = 543;
}
methods.prototype.overloadMethod = function (key1) {
console.log("The value of key1 is " + key1);
};
return methods;
}());
var methodObj = new methods();
methodObj.overloadMethod("TypeScript");
methodObj.overloadMethod(false);
输出
上述代码将产生以下输出 -
The value of key1 is TypeScript The value of key1 is false
在本教程中，用户通过不同的示例了解了函数重载的概念。用户可以通过参数重载函数或返回函数的类型。此外，我们还学习了如何重载构造函数和类方法。
