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

Question

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

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

我希望 TypeScript 检查以“callbackFunctionProps”给出的道具是否是“callbackFunction”的有效道具。有没有办法在不使用泛型的情况下做到这一点？ function 和 props 的类型无关紧要，只要它们相互匹配即可。

Answer 1

泛型正是“类型无关紧要”情况的补救措施。这是 with 泛型的一种可能方法：

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（创建的泛型的类型参数）：作为传递函数的参数类型（...fnArgs: I 部分）和作为传递给回调的参数类型（...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);