Is it possible to create a type-safe function that receives a callback and the callback's params with TypeScript?

Question

I am trying to create a function that receives two arguments: a callback function, and the parameters (props) for that function. For example:

 const callbackFunction = (a: number) => a + 2; const callbackFunctionProps = 5; callbackWrapper(callbackFunction, callbackFunctionProps);

I want TypeScript to check that the props given as 'callbackFunctionProps' are valid props for 'callbackFunction'. Is there a way to do this without using generics? it does not matter what are the types of the function and props as long as they fit each other.

Answer 1

function callbackWrapper<T extends any[]>(
  callbackFunction: (...arg: T) => any,
  ...callbackFunctionProps: T
) {
  console.log(callbackFunction(...callbackFunctionProps));
}

function callbackFunction1(a: number) {
  return a + 2;
}
const callbackFunctionProps1 = 5;
callbackWrapper(callbackFunction1, callbackFunctionProps1);

function callbackFunction2(a: string) {
  return a + ' world';
}
const callbackFunctionProps2 = 'hello';
callbackWrapper(callbackFunction2, callbackFunctionProps2);

Answer 2

Generics are exactly the remedy for "it does not matter what are the types" cases. Here's one possible way to do that with generics:

const callbackWrapper = <I extends Array<unknown>, O>(fn: (...fnArgs: I) => O, ...args: I): O => 
{
    const result = fn(...args);
    console.log(`CALLED WITH ${args.join(', ')}, RESULT IS ${result}`);
    return result;
}

const callbackFunctionA = (a: number) => a + 2; 
const callbackFunctionPropsA = 5;

const callbackFunctionB = (a: number, b: number) => a + b + 2;
const callbackFunctionPropsB1 = 10;
const callbackFunctionPropsB2 = 30;

callbackWrapper(callbackFunctionA, callbackFunctionPropsA); 
// "CALLED WITH 5, RESULT IS 7" 
callbackWrapper(callbackFunctionB, callbackFunctionPropsB1, callbackFunctionPropsB2);
// "CALLED WITH 10, 30, RESULT IS 42"

The trick is using I (type-param of created generic) in two places: as a type of passed function's param ( ...fnArgs: I part) and as a type of params passed into your callback ( ...args: I part). If they do not match, the compiler will yell at you:

callbackWrapper(callbackFunctionA, '2'); // Argument of type 'string' is not assignable to parameter of type 'number'
callbackWrapper(callbackFunctionA, 2, 3); // Expected 2 arguments, but got 3.
callbackWrapper(callbackFunctionB, 2); // Expected 3 arguments, but got 2.