TypeScript优化Modal的Open类型：忽略事件参数并支持多调用语法

当然可以优化Open类型，通过函数重载签名实现更精准的类型提示，同时兼容所有合法调用场景，包括React onClick注入的MouseEvent。

优化后的类型定义 #

用重载签名替代原来宽泛的参数类型，明确区分不同调用场景：

import React from 'react';

export type Output<T extends object, F> = Record<keyof T, F>;

// 定义Open模态框函数的重载签名
type OpenModalFn = 
  // 兼容React onClick传入的MouseEvent
  (event: React.MouseEvent<HTMLElement>) => void
  // 完整参数调用：可选超时时间 -> 可选回调 -> 可选props
  | (timeout?: number, callback?: () => void, props?: object) => void
  // 简化调用：仅传可选props
  | (props?: object) => void;

export type Open = Output<typeof modals, OpenModalFn>;
export type Close = Output<typeof modals, () => void>;

优化后的优势 #

• 精准自动补全：输入open.modalname(时，TypeScript会提示三种合法参数组合，不会再出现参数类型混杂的模糊提示
• 类型安全：每个参数类型被严格限定，比如timeout只能是number或undefined，解决原类型中参数类型混乱的问题
• 原生兼容MouseEvent：直接支持React onClick注入的事件参数，无需额外辅助函数做忽略处理

如果你的每个Modal有专属props类型，还可以进一步细化OpenModalFn，让props参数对应具体Modal的类型，进一步提升类型安全性。

内容的提问来源于stack exchange，提问作者Caffeine