Typescript:忽略事件传递的props，接受多个prop名

Question

我有一个有很多情态动词的应用程序。我写了一个fn，它将每个模态映射到打开和关闭fns，所以我得到这样的语法:

open.modalname(timeout, callback, props)

我正在使用react，在某些情况下，我将open fn传递给onClick回调，它注入了一个事件，我没有使用，所以我有一个助手fn忽略它。

这些是我得到的函数类型

export type Output<T extends Object, F> = Record<keyof T, F>;
export type Open = Output<
typeof modals,
(
timeout?: number | React.MouseEvent<HTMLElement> | object,
callback?: number | (() => void),
props?: object | (() => void),
_?: object | (() => void)
) => void
>;
export type Close = Output<typeof modals, () => void>;

我允许两种语法在我的帮助器:(timeout?回调:?,道具?)或(道具)

是否有一种方法来写打开类型，所以我得到一个更好的自动完成，但允许所有可能的类型。如:

(timeout?: number, callback?: () => void, props?: object) | (props?: object)

Answer 1

听起来你想要一个本质上有多个重载的函数类型。因为重载实际上是函数类型的交集，所以可以使用交集。请注意，函数类型必须用圆括号括起来，以避免在交叉和联合中使用时产生歧义。

type Open = ((timeout?: number, callback?: () => void, props?: object) => void) & ((props?: object) => void);

但是，如果您有很多重载，这可能会变得有点笨拙。考虑切换到呼叫签名而不是交叉。语法是不同的，但它们在这里基本上实现了相同的功能。

type Open = {
(timeout?: number, callback?: () => void, props?: object): void;
(props?: object): void;
};

操场(十字路口)

Playground(呼叫签名)

Answer 2

我真的不知道你想要完成什么，但是如果你只是想接受每个函数调用的不同选项，为什么不直接做:

export interface OpenFn {
(options?: {
event?: React.MouseEvent<HTMLElement>,
timeout?: number,
callback?: () => void,
props?: object,
}): void
}
const open: OpenFn = (options = {}) => {
const { 
event,
timeout,
callback, 
props,
} = options;
// logic
// ...
}