Typescript callback arguments, which are resolved using a function

Question

I have a situation, where I call a function with some arguments, which are resolved using another function.

This is how the code looks.

function getArgs (): [string, number] {
  return ['hello world', 22]
}

function callFnWithArgs (callback) {
  callback(...getArgs())
}

callFnWithArgs(function (/* typehint here */) {
})

The function callFnWithArgs takes a callback and then execute it by passing some arguments.
Those arguments are given by another function called getArgs().

So, is there any way to type hint, the arguments of the callback, which is the return value of another function?

Matt McCutchen · Accepted Answer · 2018-08-25 00:33:30Z

5

In TypeScript 3.0 or newer, you can use the ReturnType type alias from the standard library to determine the return type of getArgs and then use a rest parameter to tie that to the callback of callFnWithArgs:

function getArgs (): [string, number] {
  return ['hello world', 22]
}

function callFnWithArgs (callback: (...args: ReturnType<typeof getArgs>) => void) {
  callback(...getArgs())
}

callFnWithArgs(function (a, b) {
  // a is string, b is number
})

answered Aug 25, 2018 at 0:33

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sroes · Accepted Answer · 2018-08-24 10:28:04Z

3

You can either define the type of callback:

function callFnWithArgs (callback: (a: string, b: number) => void) {
  callback(...getArgs())
}

Or if it's an option to pass the arguments from outside the function callFnWithArgs, you can use Generic rest parameters:

function getArgs (): [string, number] {
  return ['hello world', 22]
}

function callFnWithArgs<T extends any[]>(args: T, callback: (...args: T) => void) {
  callback(...args);
}

callFnWithArgs(getArgs(), (str, nr) => {
})

Yet another approach would be to create overloads with generic types for the parameters:

function getArgs(): [string, number] {
  return ['hello world', 22]
}
function callFnWithArgs<T>(callback: (a: T) => void);
function callFnWithArgs<T1, T2>(callback: (a: T1, b: T2) => void);
function callFnWithArgs(callback: (...args: any[]) => void) {
  callback(...getArgs());
}

callFnWithArgs<string, number>((str, nr) => {
})

edited Aug 24, 2018 at 10:28

answered Aug 24, 2018 at 9:54

sroes

15.1k1 gold badge58 silver badges75 bronze badges

3 Comments

Aman Virk Over a year ago

I do like this approach, but if I have to call getArgs() when using callFnWithArgs, then it kills the purpose of the entire code.

shohrukh Over a year ago

Also there is an error 'A rest parameter must be of an array type.' in (...args: T) => void

sroes Over a year ago

@sherlock.92 You're probably not using TypeScript 3

shohrukh · Accepted Answer · 2018-08-24 09:51:49Z

0

Does it solve your task?

function getArgs(): [string, number] {
  return ['hello world', 22]
}

function callFnWithArgs (callback: (a: string, b: number) => void) {
  const [a, b] = getArgs();
  callback(a, b);
}

callFnWithArgs(function (a: string, b: number) {
})

answered Aug 24, 2018 at 9:51

shohrukh

3,2094 gold badges28 silver badges38 bronze badges

1 Comment

Aman Virk Over a year ago

Nope! The getArgs function can be defined by the user of my code and they cannot change the signature of callFnWithArgs.

Collectives™ on Stack Overflow

Typescript callback arguments, which are resolved using a function

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related