TS中的函数重载

最新推荐文章于 2024-04-29 14:51:59 发布

一起学web前端

最新推荐文章于 2024-04-29 14:51:59 发布

阅读量1.2k

点赞数 11

分类专栏： Typescript Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40655561/article/details/135722249

版权

Javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Typescript

8 篇文章 0 订阅

订阅专栏

本文介绍了TypeScript中如何通过函数重载来处理具有相同名称但不同参数类型的函数，通过明确参数组合帮助开发者清晰地理解函数用法。示例展示了如何在对象方法和接口中使用函数重载。

摘要由CSDN通过智能技术生成

TypeScript中的函数重载是指定义多个具有相同名称的函数，但具有不同的参数类型或参数数量。通过函数重载，可以为不同的参数类型或参数数量提供不同的函数实现

// 声明一个函数
function message(
  param1: string | object,
  param2?: number | Function | string,
  param3?: Function | number
): void {}

// 函数调用
// 调用方式1
message({
  mode: "mode",
  text: "msg",
  onClose: () => {},
  duration: 3000,
});
// 调用方式2
message("msg");
// 调用方式3
message("msg", () => {});
// 调用方式4
message("msg", "mode");
// 调用方式5
message("msg", "mode");
// 调用方式6
message("msg", "mode", 3000);
// 调用方式7
message("msg", 3000, () => {});

上面的类型声明代码是没有任何意义的，而且编辑器的提示是完全看不出该如何传递参数，如下图
在这里插入图片描述

函数重载

当我们在声明函数的时候直截了当的告诉函数使用者有哪些参数组合

// 声明一个函数
function message(options: object): void;
function message(text: string, onClose?: Function): void;
function message(text: string, mode?: string, duration?: number): void;
function message(text: string, duration?: number, onClose?: Function): void;
function message(
  param1: string | object,
  param2?: number | Function | string,
  param3?: Function | number
): void {}

// 函数调用
// 调用方式1
message({
  mode: "mode",
  text: "msg",
  onClose: () => {},
  duration: 3000,
});
// 调用方式2
message("msg");
// 调用方式3
message("msg", () => {});
// 调用方式4
message("msg", "mode");
// 调用方式5
message("msg", "mode");
// 调用方式6
message("msg", "mode", 3000);
// 调用方式7
message("msg", 3000, () => { });

这样就可以很清楚的告诉函数调用者有哪些组合可以使用，这样就可以很清楚的告诉函数调用者有哪些组合可以使用，如下图
在这里插入图片描述

有的时候我们的方法是写在对象中的，我们依然可以重载

// 声明一个方法
interface ShowMessage {
  (options: object): void;
  (text: string, onClose?: Function): void;
  (text: string, mode?: string, duration?: number): void;
  (text: string, duration?: number, onClose?: Function): void;
}
interface Utils {
  showMessage: ShowMessage;
}
const utils: Utils = {
  showMessage(
    param1: string | object,
    param2?: number | Function | string,
    param3?: Function | number
  ) {},
};

// 调用
utils.showMessage({
  mode: "mode",
  text: "msg",
  onClose: () => {},
  duration: 3000,
});
utils.showMessage("msg");
utils.showMessage("msg", () => {});
utils.showMessage("msg", "mode");
utils.showMessage("msg", "mode");
utils.showMessage("msg", "mode", 3000);
utils.showMessage("msg", 3000, () => {});