TypeScript/Angular项目添加Web Worker后库冲突问题咨询

问题1解答 #

TypeScript 的 extends 继承规则中，对象类型的配置项会深层合并，数组类型的配置项如果子配置单独声明，会直接覆盖父级的对应配置，不会叠加合并。
如果你子级 tsconfig.app.json 没有单独写 lib 字段，会完整继承父级 tsconfig.json 里的 lib 配置；但你当前的 tsconfig.app.json 已经单独声明了 lib 字段，所以父级的 lib 配置会被完全覆盖，不会生效。

问题2解答 #

只需要在 tsconfig.worker.json 的 lib 中添加 webworker 配置即可。
主应用运行在浏览器主线程，依赖 dom 类型，不需要 webworker 类型；Web Worker 运行在独立线程，没有 DOM 环境，依赖 webworker 类型，不要添加 dom 类型，二者同时声明会出现全局标识符冲突的问题。

问题3解答 #

原因就是你子配置的 lib 覆盖了父级配置，缺失了 ES 标准类型库：
你当前的 tsconfig.app.json 单独声明的 lib 只有 dom 和 webworker，没有包含 ES 系列的基础类型库，而 dom 的类型定义本身依赖 Int8Array、Promise 这些 ES 标准内置类型，所以才会报大量找不到基础类型的错误。

问题4解答 #

可以根据报错对应的编译文件范围判断：

• 如果报错出现在编译主应用非 .worker.ts 后缀的文件时，对应 tsconfig.app.json 的配置问题
• 如果报错出现在编译 .worker.ts 后缀的文件时，对应 tsconfig.worker.json 的配置问题
  你当前的报错是 lib.dom.d.ts 相关的冲突和缺失，属于主应用编译阶段的问题，对应 tsconfig.app.json 的配置错误。

修复方案 #

1. 修改 tsconfig.app.json：
   要么删除单独声明的 lib 字段，继承父级的 ["es2018", "dom"] 配置；如果要单独声明，就改成如下配置，删除不需要的 webworker，补充 ES 基础类型：

"lib": ["es2018", "dom"]

2. 修改 tsconfig.worker.json 的 lib 配置，补充 ES 基础类型，添加 webworker 类型，不要加 dom：

"lib": ["es2018", "webworker"]

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