首页 前端知识 typescript 函数重载

typescript 函数重载

2024-08-15 22:08:11 前端知识 前端哥 582 778 我要收藏

typescript 函数重载

  • 1,介绍
  • 2,2种写法
    • 2.1,写法1:函数声明和函数实现分离
    • 2.2,写法2:使用函数表达式和函数类型注解
  • 3,示例

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
 }

以上。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15698.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!