【TS】函数重载的作用

news2025/11/3 9:59:25

前言

当调用一个函数时，通常会提示有多种调用方式，各种调用方式的参数类型、参数数量、返回值等均可能不同。本文通过自己封装的message作为案例模拟一下。

在这里插入图片描述

实现

自己封装的message组件，有以下7种调用方式

message({
  mode: "mode",
  text: "text",
  onClose: function () {
    console.log("close")
  },
  duration: 3000,
})
message("text")
message("text", function () {})
message("text", "mode")
message("text", "mode", 3000)
message("text", 3000)
message("text", 3000, function () {})

根据这7种调用方式，总结参数类型如下：

function message(
  param1: string | object,
  param2?: string | number | Function,
  param3?: number | Function
) {}

但是使用时，提示过于混乱

在这里插入图片描述

声明多个函数签名，每个函数签名反应不同的调用方式，这便是函数重载

在这里插入图片描述

message({
  mode: "mode",
  text: "text",
  onClose: function () {
    console.log("close")
  },
  duration: 3000,
})
message("text")
message("text", function () {})
message("text", "mode")
message("text", "mode", 3000)
message("text", 3000)
message("text", 3000, function () {})

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?: string | number | Function,
  param3?: number | Function
) {}