typescript 函数重载

1，介绍

在 TypeScript 中，函数重载（Function Overloading）是指通过为同一个函数提供多个不同的签名（参数类型和数量），以便根据实际传入的参数类型和数量，在编译时选择正确的函数声明进行调用。

通过函数重载，我们可以定义一组函数声明，每个声明都描述了函数的参数和返回类型。当我们调用函数时，TypeScript 编译器会根据实际传入的参数类型和数量，选择最匹配的函数重载进行调用。

2，2种写法

2.1，写法1：函数声明和函数实现分离

1. 由多个函数声明组成，每个函数声明都以 function 关键字开始，后面跟随函数名和参数列表，但没有函数体。
2. 重载声明的返回类型是可选的，它用于指定函数重载的返回类型。
3. 最后一个函数声明是函数的实际实现，它包含函数的参数列表和函数体，用于提供函数的具体逻辑。

function functionName(parameter1: type1): returnType1;
function functionName(parameter1: type1, parameter2: type2): returnType2;
// ... 可以定义多个重载声明
function functionName(parameter1: type1, parameter2: type2, ...): returnTypeN;

function functionName(parameter1: type1, parameter2?: type2, ...): returnType {
  // 函数的实际实现
}

2.2，写法2：使用函数表达式和函数类型注解

const functionName: {
  (arg1: Type1): ReturnType1;
  (arg2: Type2): ReturnType2;
  // ...
  (argN: TypeN): ReturnTypeN;
} = function(arg: any): any {
  // 函数实现
};

3，示例

示例1

function processInput(value: string): void;
function processInput(value: number): void;
function processInput(value: string | number): void {
  if (typeof value === 'string') {
    console.log(`Input is a string: ${value}`);
  } else if (typeof value === 'number') {
    console.log(`Input is a number: ${value}`);
  }
}

processInput('hello'); // 调用第一个重载
processInput(42); // 调用第二个重载

示例2

function debugWarn(err: Error): void;
function debugWarn(scope: string, message: string): void;
function debugWarn(scope: string | Error, message?: string): void {
  // 函数的实际实现
  console.log("scope", scope);
  console.log("message", message);
}

debugWarn(new Error("error"));
debugWarn("sss", "mmm");

示例3

const statePrefix = 'is-'

const is: {
   (name: string, state: boolean | undefined): string
   (name: string): string
   // args 可以是1个包含1个元素的数组，该元素的类型是 boolean 或 undefined，或者是1个空数组 []。
 } = (name: string, ...args: [boolean | undefined] | []) => {
   // args[0]! 断言args[0]不会是 null 或 undefined。从而取消编译器对该表达式可能为 null 或 undefined 的类型检查。
   const state = args.length >= 1 ? args[0]! : true
   return name && state ? `${statePrefix}${name}` : '' // is-disabled
 }

以上。