🎖️typeScrpt中函数重载

嗨，大家好！这里是道长王jj~ 🎩🧙‍♂️

在 TypeScript 中，函数重载允许您为同一个函数名称定义多个不同的签名，以处理不同类型的参数或参数数量，从而实现更强的类型推断和函数行为。函数重载能够在运行时根据传递的参数来确定要调用的正确函数签名。

一个常见的用例是根据参数的类型或数量，实现不同的函数逻辑。以下是您提供的两个示例的进一步解释：

示例 1: 计算平方

function square(x: number): number;
function square(x: number[]): number[];
function square(x: number | number[]): number | number[] {
   
    if (typeof x === 'number') {
   
        return x * x;
    } else {
   
        return x.map(e => e * e);
    }
}

square(3); // => 9
square([3, 5, 7]); // => [9, 25, 49]

在这个示例中，您定义了两个函数签名，分别接受 number 类型和 number[] 类型的参数。实际的函数实现位于第三个签名中，该签名接受 number | number[] 联合类型的参数，表示可以是单个数字或数字数组。在实际实现中，通过检查 typeof x 来确定参数是数字还是数组，并执行相应的计算逻辑。

示例 2: 数据库查询

function query(id: number): User;
function query(username: string): User;
function query(attributes: Record<string, any>): User;
function query(arg: number | string | Record<string, any>): User {
   
    let condition = '';

    if (typeof arg === 'number') {
   
        condition = `id: ${
     arg}`;
    } else if (typeof arg === 'string') {
   
        condition = `username: "${
     arg}"`;
    } else {
   
        condition = JSON.stringify(arg);
    }

    return db.query(`SELECT * FROM User WHERE ${
     condition}`);
}

query(1); // => id: 1
query('johndoe'); // => username: johndoe
query({
    firstName: 'John', lastName: 'Doe' }); // => attributes: {"firstName":"John","lastName":"Doe"}

在这个示例中，您定义了三个不同的函数签名，每个签名接受不同类型的参数：number、string 和 Record<string, any>。然后，在函数的实际实现中，根据传递的参数类型，构建数据库查询的条件，并返回相应的查询结果。

通过函数重载，TypeScript 可以根据不同的参数类型或数量，在编译时就可以确定正确的函数签名，从而提供更强的类型检查和更准确的函数行为。这有助于编写更稳健和可读性更高的代码。

🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？当你处于这个阶段时，你发现什么对你帮助最大？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨