typescriptvue.jsvuejs3vue-composition-api

Infer type of callback argument into one of the returned function


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 }
    }