TypeScript 如何创建函数重载

函数或方法重载允许开发人员创建具有相同名称的多个函数。每个函数都包含相同数量的参数，但数据类型不同。另外，重载函数的返回类型也可以不同。

函数重载 是面向对象编程的概念。同时，TypeScript支持OOPS，所以我们可以在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));

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")
);

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();

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的所有参数值都是未定义的，因为我们在创建对象时没有向构造函数传递任何参数。

示例

在这个例子中，我们将学习如何重载类的方法。我们已经创建了包含overloadMethod()方法的methods类。

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);

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

在本教程中，用户通过不同的例子学习了函数重载的概念。用户可以通过参数来重载函数，或者返回函数的类型。此外，我们还学习了重载构造函数和类方法。