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.
CodePudding user response:
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.
CodePudding user response:
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);