【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): voidfunction message(param1: string | object,param2?: string | number | Function,param3?: number | Function
) {}
注意：由于有了函数重载，ts则不会根据函数的实现签名判定，只会使用重载判定。
如果这是一个方法，即存在于对象内部，同样适用。
