📜  如何在 TypeScript 中实现函数重载?(1)

📅  最后修改于: 2023-12-03 15:38:27.205000             🧑  作者: Mango

如何在 TypeScript 中实现函数重载?

函数重载是指在同一个作用域中定义多个具有相同名称但参数类型和个数不同的函数。函数重载可以提高代码的可读性和可维护性,同时也可以在类型检查时进行参数类型和个数的校验。

在 TypeScript 中,可以使用函数重载来实现相同名称但参数类型和个数不同的函数。以下是实现函数重载的步骤:

1. 定义函数的多个签名

首先,需要定义函数的多个签名,即定义多个具有相同名称但参数类型和个数不同的函数。例如:

function sayHello(name: string): void;
function sayHello(age: number): void;
function sayHello(str: string, num: number): void;

上述代码中,定义了三个不同的函数签名,分别接受一个字符串参数、一个数字参数和一个字符串参数和一个数字参数。

2. 实现函数的多个实体

接下来,需要实现函数的多个实体,即定义多个具体的函数体,分别对应不同的函数签名。例如:

function sayHello(name: string): void {
    console.log(`Hello, ${name}!`);
}

function sayHello(age: number): void {
    console.log(`You are ${age} years old.`);
}

function sayHello(str: string, num: number): void {
    console.log(`Your name is ${str} and you are ${num} years old.`);
}

上述代码中,实现了三个具体的函数体,分别对应之前定义的三个函数签名。

3. 调用函数

最后,可以像调用普通函数一样调用函数重载的函数,TypeScript 会根据传递的参数类型和个数选择合适的函数签名进行调用。例如:

sayHello("Alice");            // 输出:Hello, Alice!
sayHello(20);                 // 输出:You are 20 years old.
sayHello("Bob", 30);          // 输出:Your name is Bob and you are 30 years old.

上述代码中,分别调用了三个不同的函数签名,根据传递的参数类型和个数选择合适的函数实体进行调用。

完整代码如下:

function sayHello(name: string): void;
function sayHello(age: number): void;
function sayHello(str: string, num: number): void;

function sayHello(nameOrAgeOrStr: string | number, num?: number): void {
    if (typeof nameOrAgeOrStr === "string" && num === undefined) {
        console.log(`Hello, ${nameOrAgeOrStr}!`);
    } else if (typeof nameOrAgeOrStr === "number" && num === undefined) {
        console.log(`You are ${nameOrAgeOrStr} years old.`);
    } else if (typeof nameOrAgeOrStr === "string" && typeof num === "number") {
        console.log(`Your name is ${nameOrAgeOrStr} and you are ${num} years old.`);
    } else {
        console.log("Invalid arguments");
    }
}

sayHello("Alice");            // 输出:Hello, Alice!
sayHello(20);                 // 输出:You are 20 years old.
sayHello("Bob", 30);          // 输出:Your name is Bob and you are 30 years old.

上述代码中,函数签名和实体分别在函数声明和函数定义中进行定义,函数体通过一个通用的函数定义进行实现,根据传递的参数类型和个数选择合适的函数签名进行调用。