【TS】函数重载的作用

前言

当调用一个函数时，通常会提示有多种调用方式，各种调用方式的参数类型、参数数量、返回值等均可能不同。本文通过自己封装的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
) {}

注意：由于有了函数重载，ts则不会根据函数的实现签名判定，只会使用重载判定。

如果这是一个方法，即存在于对象内部，同样适用。