TypeScript泛型EventEmitter子类扩展事件时参数类型错误求助

问题核心 #

你碰到两个关键问题：

• 子类Foo中调用固定事件foo的emit方法时，TypeScript无法确定交叉类型后的参数类型，导致报错
• 无法限制子类（如Bar）覆盖Foo中定义的固定事件类型

原因分析 #

类型推断失败：当TEvents & { foo: string }作为EventEmitter的泛型参数时，TypeScript默认认为TEvents可能包含foo属性，无法确定(TEvents & { foo: string })["foo"]的具体类型，导致emit的参数类型匹配失败。
泛型约束失效：之前尝试的Omit或Exclude写法存在语法错误，没有正确限制TEvents不能包含Foo的固定事件键。

解决方案 #

1. 正确限制泛型参数，禁止覆盖固定事件 #

先明确Foo的固定事件类型，再让泛型参数TEvents只能包含不属于固定事件的键：

type FooEvents = {
  foo: string;
  empty: void;
};

// 约束TEvents只能包含FooEvents以外的键
class Foo<TEvents extends Record<Exclude<PropertyKey, keyof FooEvents>, unknown>> 
  extends EventEmitter<FooEvents & TEvents> {
  testFoo() {
    this.emit("foo", "123"); // 不再报错
    this.emit("empty"); // 正常工作
  }
}

此时子类如果尝试传入包含固定事件键的TEvents，TypeScript会直接报错：

// 错误：类型“{ bar: number; foo: number; }”不满足约束“Record<Exclude<PropertyKey, "foo" | "empty">, unknown>”
class Bar extends Foo<{ bar: number, foo: number }> {}

2. 优化EventEmitter的emit类型（可选） #

如果希望emit的类型推断更直观，可以用重载区分带参数和不带参数的事件：

class EventEmitter<TEvents extends Record<PropertyKey, unknown>> {
  // 重载：无参数事件（类型为void）
  public emit<TType extends keyof TEvents>(
    type: TType extends TEvents[TType] extends void ? TType : never
  ): void;

  // 重载：带参数事件
  public emit<TType extends keyof TEvents>(
    type: TType extends TEvents[TType] extends void ? never : TType,
    data: TEvents[TType]
  ): void;

  // 实现逻辑
  public emit<TType extends keyof TEvents>(
    type: TType,
    ...data: TEvents[TType] extends void ? [] : [TEvents[TType]]
  ) {
    console.log(type, data);
  }
}

调整后，emit的类型提示更清晰，错误信息也更友好。

3. 简化子类事件定义（无需动态泛型时） #

如果Foo不需要支持动态扩展事件，可以直接去掉泛型，继承固定事件的EventEmitter：

class Foo extends EventEmitter<{ foo: string; empty: void }> {
  testFoo() {
    this.emit("foo", "123"); // 完全正常
    this.emit("empty");
  }
}

// 子类需要扩展事件时再添加泛型
class Bar<TEvents extends Record<PropertyKey, unknown>> 
  extends EventEmitter<{ foo: string; empty: void } & TEvents> {
  testBar() {
    this.emit("bar", 123);
    this.emit("foo", "123");
  }
}

最终可行代码示例 #

结合上述方案的完整可运行代码：

class EventEmitter<TEvents extends Record<PropertyKey, unknown>> {
  public emit<TType extends keyof TEvents>(
    type: TType,
    ...data: TEvents[TType] extends void ? [] : [data: TEvents[TType]]
  ) {
    console.log(type, data);
  }
}

type FooEvents = {
  foo: string;
  empty: void;
};

class Foo<TEvents extends Record<Exclude<PropertyKey, keyof FooEvents>, unknown>> 
  extends EventEmitter<FooEvents & TEvents> {
  testFoo() {
    this.emit("foo", "123"); // 无错误
    this.emit("empty"); // 正常工作
  }
}

// 正确的子类扩展
class Bar extends Foo<{ bar: number }> {
  testBar() {
    this.emit("bar", 123); // 正常工作
    this.emit("foo", "123"); // 正常工作
    this.emit("empty"); // 正常工作
  }
}

// 以下代码会报错，因为尝试覆盖foo属性
// class InvalidBar extends Foo<{ bar: number, foo: number }> {}

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