Estoy tratando de crear una función que reciba dos argumentos: una función de devolución de llamada y los parámetros (accesorios) para esa función. Por ejemplo:
const callbackFunction = (a: number) => a + 2; const callbackFunctionProps = 5; callbackWrapper(callbackFunction, callbackFunctionProps);Quiero que TypeScript verifique que los accesorios proporcionados como 'callbackFunctionProps' sean accesorios válidos para 'callbackFunction'. ¿Hay alguna manera de hacer esto sin usar genéricos? no importa cuáles sean los tipos de funciones y accesorios, siempre que encajen entre sí.
Los genéricos son exactamente el remedio para los casos de "no importa cuáles sean los tipos". Aquí hay una forma posible de hacerlo con los genéricos:
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" El truco es usar I (tipo-parámetro del genérico creado) en dos lugares: como un tipo de parámetro de función pasado ( ...fnArgs: I part) y como un tipo de parámetros pasados a su devolución de llamada ( ...args: I parte). Si no coinciden, el compilador te gritará:
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.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);