如何FIx此错误TS2349:此表达式不可调用

Question

打字本代码

window.addEventListener('message', (event) => {
    event.source.postMessage("response",event.origin)
});

在"event.origin“处获取错误

 TS2349: This expression is not callable.
  Each member of the union type '((message: any, targetOrigin: string, transfer?: Transferable[]) => void) | { (message: any, transfer: Transferable[]): void; (message: any, options?: PostMessageOptions): void; } | { ...; }' has signatures, but none of those signatures are compatible with each other.

提前感谢

Answer 1

我看不到您在代码在操场上中提到的特定错误，但我确实看到了两个错误，因此：

1. event.source可以是null，但是您的代码假设它不是null。你必须处理这个问题，因为你不能做null.postMessage(/*...*/)。
2. event.origin是一个字符串，但是MessageEvent上的event.source (当它不是null)并不一定是一个窗口对象，所以您不能假设postMessage上的第二个参数允许一个字符串。遗憾的是，不同对象上的postMessage具有不同的参数列表。Window的postMessage接受一个字符串作为第二个参数，但是(例如)MessagePort的不会。

我将假设，因为您试图将字符串传递给它，所以您希望event.source是一个窗口。如果是这样的话，您可以使用一个自定义类型保护来解决这两个问题：

window.addEventListener('message', (event) => {
    if (event.source instanceof Window) {
        event.source.postMessage("response", event.origin);
    }
});

操场链接

null从不通过instanceof检查，因此可以处理这两种情况。