Typescript function 作为参数 - 使用输入的 ZDBC11CAA5BDA28F77E6FB4EDABD8 推断 output 类型

Question

I have a hook that takes in a function as an argument, and returns another function. The output function has identical arguments to the inputted function. Only the return type differs.

type InputFn = (...args: any[]) => Promise<string>
type OutputFn<TInput> = (args: Parameters<TInput>) => void

useDemo<TInput extends InputFn>(input: TInput): OutputFn {
   const output = useCallback((...args) => {
     input(args).then(str => doSomeStuff())
   }, 
   [])

   return output
}

I would like the output to be typed based on the input. eg

  const output = useDemo((a: string, b: number) => Promise.resolve(''))
  // Output Type: (a: string, b: number) => void

How can I achieve this? I currently only get any[] type and a lot of errors.

Answer 1

You're right to use the Parameters utility type , but you want to use it in the return type declaration referring to the generic type parameter TInput , rather than outside it as a type declaration:

function useDemo<TInput extends InputFn>(input: TInput): (...params: Parameters<TInput>) => void {
    return function(...args: Parameters<TInput>): void {
        input().then(str => { /*...*/ }); // Really need a `catch` on this! :-)
    };
}

Then for example:

const output1 = useDemo((x: string, y: number) => Promise.resolve(""));
//    ^−−− type is `(x: string, y: number) => void`
const output2 = useDemo((x: string) => Promise.resolve(""));
//    ^−−− type is `(x: string) => void`

Playground link

Or if you want to declare it separately, you can do that, but it has to be a generic type so you can pass in the resolved type of the generic argument to useDemo :

type InputFn = (...args: any[]) => Promise<string>;
type OutputFn<TInput extends InputFn> = (...params: Parameters<TInput>) => void;

function useDemo<TInput extends InputFn>(input: TInput): OutputFn<TInput> {
    return function(...args: Parameters<TInput>): void {
        input().then(str => { /*...*/ }); // Really need a `catch` on this! :-)
    };
}

Playground link