我正在嘗試創建一個接收兩個引數的函式：一個回呼函式和該函式的引數（道具）。例如：
const callbackFunction = (a: number) => a 2;
const callbackFunctionProps = 5;
callbackWrapper(callbackFunction, callbackFunctionProps);我希望 TypeScript 檢查以“callbackFunctionProps”給出的道具是否是“callbackFunction”的有效道具。有沒有辦法在不使用泛型的情況下做到這一點？函式和道具的型別是什么并不重要，只要它們相互匹配即可。
uj5u.com熱心網友回復：
泛型正是“型別無關緊要”情況的補救措施。這是使用泛型做到這一點的一種可能方法：
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在兩個地方使用(type-param of created generic)：作為傳遞函式的引數型別（...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.
uj5u.com熱心網友回復：
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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393472.html
標籤：javascript 打字稿
上一篇：在JavaScript中將串列轉換為陣列-請幫助理解這個for回圈
下一篇：如何在json上獲取一些值