为UI接口补充onEvent重载的TypeScript声明优化方案问询

1. 先抽离通用事件类型与父类事件映射 #

把IFrame的事件逻辑单独拆成类型别名，方便后续子接口扩展：

// 通用事件处理器类型
type EventHandler<T extends string, P = void> = (event: T, params: P) => void;

// IFrame的所有事件定义
type FrameEvents = {
  "onShow": void;
  "onHide": void;
};

// 自动生成IFrame的onEvent重载逻辑
type FrameOnEvent = {
  <T extends keyof FrameEvents>(event: T, handler: EventHandler<T, FrameEvents[T]>): void;
};

2. 定义父接口IFrame #

用上面的类型来定义onEvent，避免后续重载继承问题：

interface IFrame {
  // 其他通用UI方法
  show(): void;
  hide(): void;

  // 父类的事件绑定方法
  onEvent: FrameOnEvent;
}

3. 扩展子接口并合并事件重载 #

以IButton为例，先定义按钮独有的事件，再通过交叉类型合并父类事件，最后生成完整的onEvent重载：

// 合并父类事件+按钮独有的事件
type ButtonEvents = FrameEvents & {
  "onClick": { x: number; y: number };
  "onPress": void;
};

// 生成按钮的onEvent重载，包含所有父类+子类事件
type ButtonOnEvent = {
  <T extends keyof ButtonEvents>(event: T, handler: EventHandler<T, ButtonEvents[T]>): void;
};

// 继承父接口的非事件属性，替换onEvent为合并后的版本
interface IButton extends Omit<IFrame, "onEvent"> {
  // 按钮独有的方法
  setText(text: string): void;

  // 完整的事件绑定方法
  onEvent: ButtonOnEvent;
}

4. 测试验证 #

这样不管是调用父类的onShow/onHide，还是按钮专属的onClick/onPress，参数类型都能正确推导：

const btn: IButton = {} as IButton;

// 父类事件，params自动识别为void
btn.onEvent("onShow", (event, params) => {
  console.log("框架显示");
});

// 子类事件，params自动识别为{x: number; y: number}
btn.onEvent("onClick", (event, params) => {
  console.log(`点击坐标：${params.x}, ${params.y}`);
});

方案优势 #

• 事件映射集中管理，通过交叉类型轻松扩展，避免重复写父类事件重载
• 泛型约束自动生成所有事件的类型推导，保证类型安全
• 用Omit剔除父接口旧的onEvent，替换为合并后的版本，不会出现重载冲突

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