VSCode TypeScript智能感知错误

Question

我一直在尝试使用SvelteKit为我的网站创建ServiceWorker，但是我遇到了一个问题。我创建了一个文件/src/service-worker.ts，并在其中放置了以下代码：

import { build, files, prerendered, version } from '$service-worker';

const applicationCache = `applicationCache-v${version}`;
const staticCache = `staticCache-v${version}`;

const returnSSRpage = (path) =>
  caches.open("ssrCache").then((cache) => cache.match(path));

// Caches the svelte app (not the data)
self.addEventListener("install", (event) => {
  event.waitUntil(
    Promise.all([
      caches
        .open("ssrCache")
        .then((cache) => cache.addAll(["/"])),
      caches
        .open(applicationCache)
        .then((cache) => cache.addAll(build)),
      caches
        .open(staticCache)
        .then((cache) => cache.addAll(files))
    ])
      .then(self.skipWaiting()),
  )
})
... reduced code

运行npm run build时，代码可以完全编译，且在浏览器中运行。然而，我的VSCode智能感知出了一些问题。尤其是它说event的waitUntil属性不存在。Property 'waitUntil' does not exist on type 'Event'.ts(2339) 其他错误包括：Property 'skipWaiting' does not exist on type 'Window & typeof globalThis'.ts(2339) 和 Cannot find name 'clients'.ts(2304)。

现在，我对JavaScript和TypeScript还不太熟悉，但根据我的经验，智能感知不应该输出在编译过程中未出现的错误。为什么会出现这种情况？

我不确定需要提供哪些信息。我的TS版本是4.7.4，这也是VSCode用于智能感知的版本。我已安装JS和TS的ESLint扩展。

这里可能存在什么问题呢？ 谢谢！

- DutchEllie

Answer 1

您可以在tsconfig.json中的compilerOptions.lib中添加"WebWorker"，并在服务工作者文件中声明self的类型：

declare var self: ServiceWorkerGlobalScope;

这将通过事件名称自动推断出事件类型，无需进一步的注释。

您可能需要重新启动TS服务器（有一个命令：TypeScript: Restart TS Server）。

不过，奇怪的是它能够按原样构建...

- H.B.

---

哦，不错！真希望我在之前就能找到这个信息。。既然我刚刚更新了我的代码使用这种方式，我会删除我的回答的。:) - Keith

@DutchEllie 你的构建可能没有正确或根本没有检查类型。 waitUntil 只需要一个参数，超出第一个参数的任何内容将在运行时被忽略。 - H.B.

@DutchEllie 你似乎在末尾多加了一个逗号 -> .then(self.skipWaiting()),。虽然对我来说这不会出错，但你是否使用了类似ESLint的工具？它可能会将其视为额外的参数。 - Keith

@Keith：像这样的尾随逗号不会被视为单独的参数，因此这不是所引用错误的位置。（代码已删减） - H.B.

@H.B.我想我解决了这个问题，只需要在另一个Promise.all中包含这些内容，似乎可以正常工作。 - DutchEllie

Answer 2

这对我非常有效：

const sw: ServiceWorkerGlobalScope = self as unknown as ServiceWorkerGlobalScope;

现在你用sw替换了self，这样更有意义，而且你也得到了正确的类型。

- Saif-Alislam Dekna