TypeScript WebComponent事件系统类型推断问题求助

要解决这个类型推断问题，核心是让defineComponent自动提取setup函数中定义的事件类型，并将其关联到组件实例的whenEvent方法上。以下是具体的实现调整：

1. 定义事件类型的基础结构 #

首先明确事件映射的类型，让setup返回的对象包含events字段，用于声明组件支持的事件及其参数类型：

// 定义事件映射类型：键为事件名，值为事件参数类型
type EventMap = Record<string, unknown>;

// 组件setup函数的返回类型，包含事件定义和其他逻辑方法
type ComponentSetupResult<E extends EventMap> = {
  events: E;
  // 其他组件内部方法可在此扩展
};

// emit函数的类型，基于事件映射E做约束
type EmitFn<E extends EventMap> = <K extends keyof E>(eventName: K, payload: E[K]) => void;

2. 调整BaseCustomComponent基类 #

让基类接收事件映射泛型E，并将whenEvent方法的类型绑定到这个泛型上：

class BaseCustomComponent<E extends EventMap = {}> extends HTMLElement {
  private eventListeners: Map<keyof E, Set<(payload: E[keyof E]) => void>> = new Map();

  // emit函数：基于事件映射E做类型校验
  emit: EmitFn<E> = (eventName, payload) => {
    this.dispatchEvent(new CustomEvent(String(eventName), { detail: payload }));
    // 触发内部监听回调
    this.eventListeners.get(eventName)?.forEach(cb => cb(payload));
  };

  // whenEvent方法：自动推断事件名和参数类型
  whenEvent<K extends keyof E>(eventName: K, callback: (payload: E[K]) => void) {
    if (!this.eventListeners.has(eventName)) {
      this.eventListeners.set(eventName, new Set());
    }
    this.eventListeners.get(eventName)!.add(callback);
    // 返回销毁函数用于清理监听
    return () => {
      this.eventListeners.get(eventName)?.delete(callback);
    };
  }
}

3. 修改defineComponent工厂函数 #

利用ReturnType和infer自动提取setup返回的事件类型，无需用户显式传入泛型：

function defineComponent<SetupFn extends () => ComponentSetupResult<any>>(setup: SetupFn) {
  // 自动提取setup返回的事件类型E
  type E = ReturnType<SetupFn>['events'];

  return class extends BaseCustomComponent<E> {
    connectedCallback() {
      const { events, ...rest } = setup();
      // 将setup返回的方法挂载到实例上
      Object.assign(this, rest);
    }
  };
}

4. 组件使用示例 #

现在componentA的emit和whenEvent都能自动推断类型，无需显式指定泛型：

const ComponentA = defineComponent(() => {
  return {
    events: {
      // 声明事件名和参数类型
      clicked: 0 as number,
      inputChanged: '' as string
    },
    // 组件内部方法
    handleClick() {
      this.emit('clicked', 123); // 类型校验正常：参数必须是number
      // this.emit('clicked', 'abc'); // 会触发类型错误
    }
  };
});

// 使用组件
const domElement = new ComponentA();
document.body.appendChild(domElement);

// whenEvent自动推断事件名和参数类型
domElement.whenEvent('clicked', (payload) => {
  // payload类型自动推断为number
  console.log(payload.toFixed(2));
});

domElement.whenEvent('inputChanged', (payload) => {
  // payload类型自动推断为string
  console.log(payload.toUpperCase());
});

// domElement.whenEvent('unknown', () => {}); // 会触发事件名不存在的类型错误

关键原理说明 #

• 通过让setup返回包含events的对象，明确告知TypeScript组件支持的事件结构；
• 利用ReturnType<SetupFn>['events']自动提取事件类型，避免用户手动传入泛型；
• 将事件类型E传递给BaseCustomComponent，让emit和whenEvent的类型都基于E约束，实现类型自动匹配。

内容的提问来源于stack exchange，提问作者Léal