如何为使用Worker/SharedWorker的浏览器端TypeScript项目配置tsconfig？

针对你遇到的问题，社区里有几种成熟的常用解决方案：

1. 给单个Worker文件添加引用指令（最简单直接） #

直接在Worker/SharedWorker的代码文件顶部添加TypeScript的三斜线引用注释，为该文件单独指定所需的Lib，完全不会影响全局配置：

/// <reference lib="webworker" />

// 此处可正常访问SharedWorkerGlobalScope、self.postMessage等Worker相关API
self.onconnect = (e) => {
  const port = e.ports[0];
  port.onmessage = (msg) => {
    port.postMessage(`收到消息：${msg.data}`);
  };
};

webworker这个Lib已经包含了SharedWorkerGlobalScope的类型定义，无需额外配置。

2. 使用多份tsconfig配置文件（适合复杂项目） #

如果你的Worker代码集中在某个目录（比如src/workers/），可以给该目录单独创建一份tsconfig.json，配置专属的Lib和编译规则：

• 根目录tsconfig.json（主线程代码，保留DOM支持）：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext"
    // 其他全局编译配置
  },
  "include": ["src/main/**/*"]
}

• src/workers/tsconfig.json（Worker线程代码）：

{
  "compilerOptions": {
    "lib": ["ESNext", "WebWorker"],
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "../../dist/workers"
    // 其他Worker专属编译配置
  },
  "include": ["./**/*"]
}

编译时分别指定对应配置文件即可：

# 编译主线程代码
tsc -p tsconfig.json
# 编译Worker线程代码
tsc -p src/workers/tsconfig.json

如果使用Vite、Webpack等构建工具，也可以在工具配置中为Worker文件单独指定对应的tsconfig或编译选项。

3. 类型断言（临时应急方案） #

如果不想修改配置或添加注释，也可以用类型断言绕过类型检查，但这种方式不够优雅，不推荐长期使用：

const workerSelf = self as unknown as SharedWorkerGlobalScope;
workerSelf.onconnect = (e) => {
  // 业务逻辑代码
};

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