TypeScript中如何向SharedWorker发送消息？解决类型报错

你遇到的问题是因为SharedWorker的通信机制和普通Worker完全不同，它需要通过内置的port属性来收发消息，而且事件类型也得用正确的MessageEvent，而不是普通的Event。结合你已经安装了@types/sharedworker的情况，我给你整理了正确的实现方式：

第一步：修改主线程代码（tstut.ts） #

把你原来的代码改成下面这样，核心是通过worker.port来操作：

let worker: SharedWorker.SharedWorker = new SharedWorker('worker.js');

// 正确发送消息：通过port调用postMessage
worker.port.postMessage('do some work');

// 正确监听消息：在port上监听message事件，指定类型为MessageEvent
worker.port.addEventListener('message', (e: MessageEvent) => {
  console.log(e.data); // 现在e.data会被TypeScript正确识别
});

// 可选但推荐：手动启动端口（部分环境下addEventListener会自动触发，但显式调用更稳妥）
worker.port.start();

第二步：修改Worker线程代码（worker.ts） #

SharedWorker内部需要监听connect事件来获取连接的port，再通过这个port和主线程通信：

self.addEventListener('connect', (connectEvent) => {
  // 获取当前连接的port
  const port = connectEvent.ports[0];

  // 监听主线程发来的消息
  port.addEventListener('message', (msgEvent) => {
    console.log('Worker收到消息:', msgEvent.data);
    // 可选：给主线程回复消息
    port.postMessage('任务完成啦！');
  });

  // 启动端口
  port.start();
});

为什么之前会报错？ #

• postMessage不存在：SharedWorker实例本身没有postMessage方法，所有通信都必须通过它的port属性完成——这是因为SharedWorker可以同时和多个页面/脚本建立连接，每个连接对应一个独立的port。
• data属性不存在：你之前用的Event类型太宽泛，message事件的正确类型是MessageEvent，它才包含data属性，TypeScript需要这个类型提示才能识别e.data。

额外说明 #

你已经安装了@types/sharedworker，所以不需要额外修改tsconfig.json里的配置，当前的lib: ["es2015", "dom"]加上类型包已经能正确识别SharedWorker的类型。

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