typescript - EventSource 使用 TypeScript 命名事件

Question

我正在尝试使用 EventSource与 typescript 但在使用命名事件时无法正确键入响应。
我试过

const evtSource = new EventSource('/my-url');

const parseMyEvent = (evt: Event) => {
  const data: MyDataInterface = JSON.parse(evt.data);
  console.log(data)
}

evtSource.addEventListener('my-event', parseMyEvent);

失败，因为 Event没有房产数据

const evtSource = new EventSource('/my-url');

const parseMyEvent = (evt: MessageEvent) => {
  const data: MyDataInterface = JSON.parse(evt.data);
  console.log(data)
}

evtSource.addEventListener('my-event', parseMyEvent);

失败 evtSource.addEventListener('my-event', parseMyEvent) , 带有“没有与此调用匹配的过载。
”。
我知道MessageEvent是一个通用接口(interface)，但我应该使用什么作为它的类型？
我使用的是 TS 3.5.3 所以我尝试安装外部类型 @types/eventsource也没有运气(我知道，它是针对 polyfill EventSource 库的，但我试过了)
使用通用时 evtSource.onMessage = fn它没有任何问题
应该可以在 TS 中键入 EventSource 事件的监听器/响应，但是如何呢？

Answer 1

下面的代码应该可以工作。基本上，您使用的是 TypeScript 的 Type assertions让编译器相信你，底层事件实际上是一个 MessageEvent 类型的对象。 :

const evtSource = new EventSource('/my-url');

const parseMyEvent = (evt: Event) => {
  const messageEvent = (evt as MessageEvent);  // <== This line is Important!!
  const data: MyDataInterface = JSON.parse(messageEvent.data);
  console.log(data)
}

evtSource.addEventListener('my-event', parseMyEvent);