TypeScript WebWorker onmessage处理编译报错问题求助

嘿，我帮你揪出问题根源啦！你遇到的TS2345错误，核心是对Worker的onmessage用法理解错了——它不是个能直接传回调的方法，而是个要赋值函数的属性，这才导致TypeScript把你的回调函数当成了MessageEvent类型的参数来校验，自然就报错啦。

为啥会报错？ #

你写的代码是这样的：

worker.onmessage((ev) => { console.log(ev.data); });

这相当于你把回调函数当成参数传给了onmessage，但实际上onmessage是个属性，它需要的是直接赋值一个函数，而不是调用它传参数。TypeScript误以为你要把这个回调塞到一个需要MessageEvent的位置，所以才会说你的函数缺少data属性。

两种正确的写法 #

写法1：直接给onmessage赋值回调 #

这是最直接的方式，还能给ev明确指定类型：

const worker = new Worker('./worker/render-worker.ts');
worker.onmessage = (ev: MessageEvent) => {
  console.log(ev.data);
};

写法2：用addEventListener绑定事件（更推荐） #

这种方式支持给同一个事件绑定多个回调，灵活性更高：

const worker = new Worker('./worker/render-worker.ts');
worker.addEventListener('message', (ev: MessageEvent) => {
  console.log(ev.data);
});

额外小提示 #

如果你的tsconfig.json里没配置DOM相关类型，可能还会遇到Worker或MessageEvent找不到的问题，记得把dom库加到配置里：

{
  "compilerOptions": {
    "lib": ["esnext", "dom"],
    // 其他你的配置项...
  }
}

改完之后，代码应该就能正常编译啦！

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