当我尝试将消息 postMessage 回源时打字稿抱怨

Question

这是我的代码

window.addEventListener('message', (e) => {
  e.source.postMessage('hi there, I hear you!', '*');
});

这是错误：

[ts] 无法调用类型缺少调用签名的表达式。输入 '((message: any, targetOrigin: string, transfer?: any[]) => void) | ((message: any, transfer?: any[]) => void)' 没有兼容的调用签名。

当我检查postMessage它似乎是一种方法window并具有签名：

declare function postMessage(
    message: any,
    targetOrigin: string,
    transfer?: any[]
): void;

这看起来很像我对我的呼号。那么我的代码有什么问题？

Answer 1

e.source是 类型MessageEventSource。

type MessageEventSource = WindowProxy | MessagePort | ServiceWorker;

由于只有WindowProxy您正在使用的方法签名，您可以使用以下方法保护它：

window.addEventListener('message', (e) => {
  if (!(e.source instanceof MessagePort) && !(e.source instanceof ServiceWorker)) {
    e.source.postMessage('hi there, I hear you!', '*');
  }
});

或者以其他方式告诉 TS 您e.source的类型为WindowProxy | Window。