[英]How can I implement a typed “both” function in TypeScript?
故事书操作插件提供了一种记录回调调用的便捷方式:
renderButton({onClick: action('onClick')});
action
调用返回一个 function 记录字符串 ( onClick
) 和调用它的 arguments 。
有时我想同时拥有action
和其他东西:
renderButton({
onClick: (arg1, arg2, arg3) => {
action('onClick')(arg1, arg2, arg3);
// ... my code
}
});
由于我必须传入所有 arguments,因此action
调用变得更加冗长。 所以我实现了一个both
让我写:
renderButton({
onClick: both(action('onClick'), (arg1, arg2, arg3) => {
// ... my code
})
});
这很好用,直到我尝试添加 TypeScript 类型。 这是我的实现:
function both<T extends unknown[], This extends unknown>(
a: (this: This, ...args: T) => void,
b: (this: This, ...args: T) => void,
): (this: This, ...args: T) => void {
return function(this: This, ...args: T) {
a.apply(this, args);
b.apply(this, args);
};
}
此类型在运行时检查并工作,但根据上下文,它会导致不需要的any
类型或类型错误。 例如:
const fnWithCallback = (cb: (a: string, b: number) => void) => {};
fnWithCallback((a, b) => {
a; // type is string
b; // type is number
});
fnWithCallback(
both(action('callback'), (a, b) => {
a; // type is any
b; // type is any
}),
);
fnWithCallback(
both(action('callback'), (a, b) => {
// ~~~~~~~~~~~
// Argument of type '(a: T[0], b: T[1]) => number' is not assignable to
// parameter of type '() => void'.
}),
);
是否可以both
从回调上下文中正确捕获参数类型? 为了避免可能来自action
声明的any
类型:
export type HandlerFunction = (...args: any[]) => void;
这是带有完整示例的游乐场链接。
这应该有效并保持正确的回调参数类型:
type UniversalCallback<Args extends any[]> = (...args: Args) => void;
function both<
Args extends any[],
CB1 extends UniversalCallback<Args>,
CB2 extends UniversalCallback<Args>
>(fn1: CB1, fn2: CB2): UniversalCallback<Args> {
return (...args:Args) => {
fn1(...args);
fn2(...args);
};
}
该解决方案忽略了this
,但我不知道这对您来说是否有问题,因为您提供的使用示例并没有真正使用this
。
扩展支持以将this
传递给回调很容易:
type UniversalCallback<T, Args extends any[]> = (this:T, ...args: Args) => void;
function both<
T,
Args extends any[],
CB1 extends UniversalCallback<T, Args>,
CB2 extends UniversalCallback<T, Args>
>(fn1: CB1, fn2: CB2): UniversalCallback<T, Args> {
return function(this:T, ...args:Args) {
fn1.apply(this, args);
fn2.apply(this, args);
};
}
它在以下测试中完美运行:
class A { f() {} }
const fnWithCallback = (cb: (this: A, a: string, b: number) => void) => { };
fnWithCallback(function(a, b) {
a; // type is string
b; // type is number
this.f(); // works
});
fnWithCallback(
both(function (a) {
a; // correct type
this.f(); // works
}, function (a, b) {
a; b; // correct types
this.f(); // works
}),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.