Typescript 如何根据事件名称缩小回调事件类型

我正在尝试实现一个事件发射器。代码非常简单

现在

tsc

认为

eventHandler

中的事件类型是

'ErrorEvent'|'MessageEvent'

。 这就是问题所在，我希望

tsc

将类型缩小到正确的类型（取决于传递给

on

函数的

eventName

）

能做到吗

定义

interface Event {
  code: string;
}

interface ErrorEvent extends Event {
  xxx: number;
}

interface MessageEvent extends Event {
  yyy: number;
}

interface Events {
  error: ErrorEvent,
  message: MessageEvent
}

type EventHandler = (event: Events[keyof Events]) => void;

TS代码

function on (eventName: keyof Events, eventHandler: EventHandler) {
  console.log(eventName)
}

on('message', (event) => { // ErrorEvent | MessageEvent
  console.log(event)
  console.log(event.code)
  console.log(event.xxx) //  Property 'xxx' does not exist on type 'ErrorEvent | MessageEvent'.
  console.log(event.yyy) //  Property 'yyy' does not exist on type 'ErrorEvent | MessageEvent'.
})

---

首先，您必须将EventHandler作为联合类型删除：

type EventHandler<K extends EventKeys> = (event: Events[K]) => void

我认为这应该做到：

接口事件{
代码：字符串；
}
接口错误事件扩展事件{
xxx：编号；
}
接口MessageEvent扩展事件{
yyy：编号；
}
接口事件{
错误：ErrorEvent，
message:MessageEvent
}
类型EventKeys=keyof事件
类型EventHandler=（事件：Events[K]）=>void；
上的函数（eventName:K，eventHandler:eventHandler）：void{
console.log（eventName）
}
on（'消息'，（事件）=>{
console.log（事件）
console.log（事件代码）
console.log（event.xxx）//属性“xxx”在类型“MessageEvent
quick and dirty”中不存在，或者在if中包装为未知的事件“ErrorEvent”，反之亦然。但大多数情况下可能为dirtycases@manidos我相信这会有帮助