Home > OS >  VSCode Typescript intellisense wrong
VSCode Typescript intellisense wrong

Time:07-04

I have been trying to create ServiceWorker for my website using SvelteKit, but am running into an issue here. I created a file /src/service-worker.ts and in there, I put the following code

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

When running npm run build this code compiles perfectly fine and the code runs in the browser. However, my VSCode intellisense gets some stuff wrong. Most notably, it says that the waitUntil property of event does not exist. Property 'waitUntil' does not exist on type 'Event'.ts(2339) among other things, such as Property 'skipWaiting' does not exist on type 'Window & typeof globalThis'.ts(2339) and Cannot find name 'clients'.ts(2304).

Now, I am quite new to Javascript and Typescript, but from my experience, the Intellisense should not output an error that doesn't also appear during compilation. Why does this happen?

I am unsure of what information to provide. My TS version is 4.7.4 which is also the version VSCode is using for Intellisense. I have installed the ESLint extension for JS and TS.

What could be the problem here? Thanks!

CodePudding user response:

You can add "WebWorker" to the compilerOptions.lib in tsconfig.json and declare the type of self in the service worker file:

declare var self: ServiceWorkerGlobalScope;

This will lead to the event types automatically being inferred without further annotations via the event name.

You may need to restart the TS server (there is a command for that: TypeScript: Restart TS Server).

Still, odd that it would build as is...

  • Related