如何将beforeOpen回调参数类型推断到useAppModal返回的open函数？

需求说明 #

需要让useAppModal中open函数的参数类型自动跟随传入的beforeOpen回调的参数类型：

• 当传入带参数的beforeOpen时，open必须传入对应类型和数量的参数
• 当不传入beforeOpen时，open为无参函数() => void

原代码问题 #

原代码无法自动推断参数类型，需要补充泛型定义来实现类型联动：

export function useAppModal(beforeOpen?: <???>) => void) {
  const modal = ref()
  // 调用open时传入的所有参数都会传递给beforeOpen回调
  const open = (...args: <???>) => {
    beforeOpen?.(...args)
    modal.value?.open()
  }
  const close = () => {
    modal.value?.close()
  }
  return { modal, open, close }
}

解决方案代码 #

通过添加泛型参数来关联beforeOpen和open的参数类型：

import { ref } from 'vue'

// 定义泛型T为beforeOpen的参数类型数组，默认值为空数组对应无参场景
export function useAppModal<T extends unknown[] = []>(
  beforeOpen?: (...args: T) => void
) {
  const modal = ref<InstanceType<typeof AppModal> | null>(null)
  
  const open = (...args: T) => {
    beforeOpen?.(...args)
    modal.value?.open()
  }

  const close = () => {
    modal.value?.close()
  }

  return { modal, open, close }
}

效果验证 #

1. 传入带参数的beforeOpen时，open会强制要求对应参数：

const { modal, open, close } = useAppModal((arg1: number, arg2: string[]) => {
  // 执行操作
})

open() // TypeScript会报错：期望传入2个参数，但实际传入0个
open(123, ['a', 'b']) // 类型正确，无报错

2. 不传入beforeOpen时，open为无参函数：

const { open } = useAppModal()
open() // 无报错，类型为() => void

关键说明 #

• 泛型T extends unknown[] = []：限制T为参数数组类型，默认值为空数组，对应无参场景
• (...args: T)：让beforeOpen和open共享同一参数类型，实现类型联动
• 给modal添加具体类型（比如InstanceType<typeof AppModal>）可以提升类型安全性，避免any类型

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