数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学如何在TypeScript中创建函数重载？
函数或方法重载允许开发者创建多个同名函数。每个函数的参数数量相同，但数据类型不同。此外，重载函数的返回类型也可以不同。
函数重载是面向对象编程的概念。TypeScript也支持OOP，因此我们可以轻松地在TypeScript中实现函数重载。此外，函数重载提供了代码可重用性，并帮助开发者提高代码可读性。
让我们通过现实生活中的例子来了解函数重载的用法。例如，你创建了一个函数，它接受一个字符串作为参数并返回字符串的长度。假设我们想传递一个数字作为参数；那么，我们需要通过声明一个同名的新函数并接受数字作为参数来重载该函数。
语法
用户可以遵循以下语法来重载函数。
function function1(param1: string): number;
function function1(param1: number): number;
function function1(param1: any): any {
// function body
}
在上面的语法中，我们重载了fuction1。用户可以观察到，它在第一个声明中接受字符串类型参数，在第二个声明中接受数字类型参数。
之后，我们需要在定义函数时使用任何类型的参数和返回类型，以支持数字和字符串两种类型。
示例
在下面的示例中，getStrLen() 函数通过参数类型进行了重载。getStrLen() 函数可以接受字符串或数字作为参数，并返回表示字符串长度的数值。
用户可以看到我们如何使用 toString() 方法将数值转换为字符串，并通过 length 属性获取其长度。
function getStrLen(str: string): number;
function getStrLen(str: number): number;
function getStrLen(str: any): any {
// if the parameter is the number type, convert it to the string.
if (typeof str != "string") {
str = str.toString();
}
let length = str.length;
return length;
}
// calling the functions with string and number parameters.
console.log("The string length is " + getStrLen("TutorialsPoint "));
console.log("The length of number is " + getStrLen(10));
编译后，将生成以下JavaScript代码：
function getStrLen(str) {
// if the parameter is the number type, convert it to the string.
if (typeof str != "string") {
str = str.toString();
}
var length = str.length;
return length;
}
// calling the functions with string and number parameters.
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();
// creating the object without passing the constructor arguments.
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();
// creating the object without passing the constructor arguments.
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的所有参数值都是未定义的。
示例
在这个例子中，我们将学习如何重载类方法。我们创建了一个名为 methods 的类，其中包含 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
在本教程中，用户学习了通过不同示例进行函数重载的概念。用户可以通过参数重载函数，或返回函数的类型。此外，我们还学习了如何重载构造函数和类方法。
1K+ 次浏览
