在Typescript中如何包装拥有多重重载的函数？

原因说明 #

TypeScript 现阶段不支持自动关联重载函数的联合参数配对关系，你定义的两个参数elem和handler是独立的联合类型，TS 无法识别二者是否匹配同一条重载规则，因此直接调用原函数会抛出类型不匹配的错误。

最简实现方案 #

由于你已经保证包装函数的重载签名和被包装函数完全一致，所有传入的参数必然符合原函数的某一条重载规则，仅需添加一次类型断言即可省略所有类型守卫代码，还可以自由插入自定义行为：

function handleMainEvent2(
  elem: HTMLFormElement,
  handler: FormSubmitHandler
)
function handleMainEvent2(
  elem: HTMLIFrameElement,
  handler: MessageHandler
)
function handleMainEvent2(
  elem: HTMLFormElement | HTMLIFrameElement,
  handler: FormSubmitHandler | MessageHandler
) {
  // 可在此处添加自定义前置逻辑
  const result = (handleMainEvent as typeof handleMainEvent2)(elem, handler)
  // 可在此处添加自定义后置逻辑
  return result
}

通用封装方案 #

如果需要对多个同类型重载函数做统一包装，可以抽离通用包装函数避免重复编写代码：

// 提前定义原函数类型方便复用
type HandleMainEventFn = typeof handleMainEvent

function wrapEventHandle<F extends HandleMainEventFn>(fn: F): F {
  return function wrapped(elem: any, handler: any) {
    // 统一插入自定义前置逻辑
    const result = fn(elem, handler)
    // 统一插入自定义后置逻辑
    return result
  } as F
}

// 直接生成包装后的函数，无需重复声明重载
const handleMainEvent2 = wrapEventHandle(handleMainEvent)

内容的提问来源于stack exchange，提问作者HapticBovinator