在tsconfig.json中同时引入DOM与WebWorker编译报错的解决咨询

报错原因 #

DOM 和 WebWorker 两个标准库都声明了全局变量 self，但类型定义冲突：

• DOM库中self的类型是Window & typeof globalThis
• WebWorker库中self的类型是WorkerGlobalScope & typeof globalThis

TypeScript不允许全局变量重复声明且类型不一致，因此抛出编译错误。

解决方法 #

1. 拆分配置文件（推荐） #

如果项目同时包含普通DOM代码和WebWorker代码，拆分tsconfig是最规范的方案：

• 主配置文件（tsconfig.json）针对DOM代码：

{
  "compilerOptions": {
    "lib": ["ES2015", "DOM"],
    "module": "ES2015",
    "target": "ES5",
    "outDir": "dist",
    "sourceMap": false,
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "preserveConstEnums": true,
    "downlevelIteration": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["src/worker/**/*", "node_modules"]
}

• WebWorker单独配置文件（tsconfig.worker.json）：

{
  "compilerOptions": {
    "lib": ["ES2015", "WebWorker"],
    "module": "ES2015",
    "target": "ES5",
    "outDir": "dist/worker",
    "sourceMap": false,
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "preserveConstEnums": true,
    "downlevelIteration": true
  },
  "include": ["src/worker/**/*.ts"],
  "exclude": ["node_modules"]
}

• 编译时分别执行：

tsc -p tsconfig.json
tsc -p tsconfig.worker.json

2. 移除不需要的库 #

如果项目只需要其中一种环境，直接删除lib数组中不需要的项：

• 仅开发网页：保留DOM，移除WebWorker
• 仅开发WebWorker：保留WebWorker，移除DOM

3. 跳过库类型检查（不推荐） #

如果必须在同一配置中兼容，可开启skipLibCheck跳过库文件的类型校验，但这会隐藏其他潜在类型问题，谨慎使用：

{
  "compilerOptions": {
    // 其他配置不变
    "skipLibCheck": true
  }
}

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