打字稿错误：找不到名称“FetchEvent”。您是说“TouchEvent”吗

Question

我使用不同的 npm 包将 Pyodide 集成到一个大的 Angular 项目中。 其中两个包是 sync-message 和 pyodide。

错误消息：找不到“FetchEvent”。

我使用同步消息时遇到以下错误：

4 export declare function isServiceWorkerRequest(request: FetchEvent | string): boolean;
                                                          ~~~~~~~~~~
  node_modules/typescript/lib/lib.dom.d.ts:13890:13
    13890 declare var TouchEvent: {
                      ~~~~~~~~~~
    'TouchEvent' is declared here.

我将此错误放在一边，以便我可以通过在项目的 tsconfig.json 文件中添加

"skipLibCheck": true

来继续处理我的代码。

这是我的 tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "lib": [
      "es2016",
      "dom",
      "webworker"
    ],
    "mapRoot": "./",
    "module": "es2020",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es2015",
    "strict": false,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

作为项目的一部分，我需要包含一个 Web Worker，我为其配备了自己的 tsconfig.worker.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": [
      "node",
    ],
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

现在，在项目工作结束时，我需要再次解决这个问题，删除

"skipLibCheck": true

。

据我了解，“FetchEvent”是在 node_modules/typescript/lib/lib.webworker.d.ts 中定义的。 由于在主线程中使用了同步消息库，我确实相信将“webworker”库放入 tsconfig.json 中可以解决它，但错误仍然存在。

---

错误消息：找不到“HTMLCanvasElement”。

在半相关的注释中，pyodide npm 包会抛出类似的错误。

Error: node_modules/pyodide/pyodide.d.ts:13:22 - error TS2304: Cannot find name 'HTMLCanvasElement'.

13  setCanvas2D(canvas: HTMLCanvasElement): void;
                        ~~~~~~~~~~~~~~~~~

由于 HTMLCanvasElement 是在 typescript 的 lib.dom.d.ts 中定义的，但 pyodide 正在我的 webworker 中导入。当然，Webworker 中无法识别 HTMLCanvasElement。

---

问题

为什么会出现这些错误以及如何修复它们？

我确实环顾四周，试图在网络上的某个地方找到解决方案，但无济于事。我也问了chatgpt和gemini，他们也无法给我解决方案。

Answer 1

我想我找到了你的问题。这是我想出的解决方案。

首先是，

错误1：找不到FetchEvent

FetchEvent

类型在

lib.webworker.d.ts

中定义，它是TS库的一部分。出现此问题的原因是

sync-message

lib 在主线程中使用

FetchEvent

，但

webworker

lib 未包含在主线程的编译中。

要解决此问题，您可以通过修改

webworker

将

tsconfig.json

库添加到主线程编译中，如下所示：

{
  "compilerOptions": {
    //... (other options remain the same)
    "lib": [
      "es2016",
      "dom",
      "webworker" // Add this
    ],
    //... (other options remain the same)
  }
}

通过在主线程编译中包含

webworker

，TS将能够找到

FetchEvent

类型。

这让我们

错误2：找不到HTMLCanvasElement

发生此错误是因为

HTMLCanvasElement

是在

lib.dom.d.ts

中定义的，默认情况下不包含在 Web Workers 编译中。由于

pyodide

正在导入到您的 Web Worker 中，因此它尝试使用

HTMLCanvasElement

，这在 Web Worker 上下文中不可用。

要解决此问题，您可以为 Web Worker 创建一个单独的

tsconfig.worker.json

文件，其中包括

dom

库：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker",
      "dom" // Add this
    ],
    "types": [
      "node",
    ],
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

通过在 Web Worker 的编译中包含

dom

，TS 将能够找到

HTMLCanvasElement

类型。

补充建议

为了避免将来出现类似问题，请考虑为具有特定依赖项或要求的每个模块或库创建单独的

tsconfig.json

文件。这将帮助您更有效地管理编译过程并避免不同模块之间的冲突。

如果这有效的话！