咨询TypeScript中Worker相关两类类型错误的解决方案

我来帮你搞定这两个和Worker有关的TypeScript类型问题，具体方案如下：

问题1：Property 'Worker' does not exist on type 'Window' 错误 #

这个错误是因为当前你的TypeScript类型库没有包含主线程中Worker构造函数的类型定义。有两种靠谱的解决方式：

方案1：修改tsconfig的lib配置（优先推荐） #

更新你的tsconfig.json，在compilerOptions.lib数组里添加"webworker"（或者直接升级到"es2020"这类更高版本的ES库，它们已经包含了Worker相关的类型）：

{
  "compilerOptions": {
    "lib": ["es2015", "dom", "webworker"]
  },
  "files": ["./project1/tstut.ts", "./project1/worker.ts"]
}

修改后重新编译，TypeScript就能正确识别window.Worker了。

方案2：手动扩展Window接口 #

如果暂时不想修改tsconfig，可以在tstut.ts的顶部添加全局接口声明，告诉TypeScript Window对象包含Worker属性：

declare global {
  interface Window {
    Worker: typeof Worker;
  }
}

// 你的原有代码
if (window.Worker) { 
  console.log('Workers are available'); 
} 
const worker: Worker = new Worker('worker.js'); 
worker.postMessage('do some work');

问题2：Expecting 2-3 arguments, but got 1 错误 #

这个错误源于旧版本TypeScript对Worker全局作用域中postMessage方法的类型定义——它要求必须传递第二个参数（Transferable对象数组）。解决方法有两种：

方案1：补充空的Transferable数组参数 #

在调用postMessage时添加一个空数组作为第二个参数，符合类型定义的要求：

self.addEventListener('message', (e) => {
  if (e.data === 'do some work') {
    console.log('Worker is about to start some work');
    let count: number = 0;
    for (let i: number = 0; i < 1000; i++) {
      count += i;
    }
    // 添加空数组作为第二个参数，满足类型检查
    self.postMessage({ message: count }, []);
  }
});

方案2：升级TypeScript版本并更新lib配置 #

如果你的TypeScript版本偏旧，建议升级到4.5及以上版本，同时在tsconfig的lib中添加"webworker"和"es2020"（或更高版本）。新版本的类型定义已经把postMessage的第二个参数设为可选，这样你就可以只传递消息内容参数了。

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