是否可以创建一个类型安全的函数来接收回调和回调的参数？

Question

我正在尝试创建一个接收两个参数的函数：回调函数和该函数的参数(props(。例如：

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

我希望TypeScript检查作为"callbackFunctionProps"提供的道具是否是"callbackFunction"的有效道具。有没有一种方法可以在不使用泛型的情况下做到这一点？功能和道具的类型是什么并不重要，只要它们相互适合即可。

Answer 1

泛型正是"什么是类型并不重要；案例。以下是使用泛型实现的一种可能方法：

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"

诀窍是在两个地方使用I(创建的泛型的类型param(：作为传递函数的param的类型(...fnArgs: I部分(和作为传递到回调中的params的类型(...args: I部分(。如果它们不匹配，编译器会对你大喊：

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.

Answer 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);