Infer type of callback argument into one of the returned function

July 25, 2024

I have composable function like this:

export function useAppModal(beforeOpen?: <???>) => void) {
  const modal = ref()
  // calling open with any arguments will be passed to beforeOpen callback
  const open = (...args: <???>) => {
    beforeOpen?.(...args)
    modal.value?.open()
  }
  const close = () => {
    modal.value?.close()
  }
  return { modal, open, close }
}

I want to infer the type of beforeOpen into function open.

So that when I call useAppModal like this:

const { modal, open, close } = useAppModal((arg1: number, arg2: string[]) => {
    // do something
})

open() // should error:

    Expected 2 arguments, but got 0.
    An argument for 'arg1' was not provided.
    const open: (arg1: number, arg2: string[]) => void

And beforeOpen is optional, so when call useAppModal without any arguments, I want the type of open to be () => void

>Solution :

you can use T extends unknown[].

TS Playground

function useAppModal<T extends unknown[]>(beforeOpen?: (...args: T) => void) {
  // calling open with any arguments will be passed to beforeOpen callback
  const open = (...args: T) => {
    beforeOpen?.(...args)
  }
  const close = () => {
    //
  }
  return { open, close }
}