CODEWITHSUNDEEP
javascripttypescriptvisual-studio-codesvelte
DutchEllie
DutchEllie

Reputation: 83

VSCode Typescript intellisense wrong

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!

Upvotes: 3

Views: 1639

Answers (2)

Saif-Alislam Dekna
Saif-Alislam Dekna

Reputation: 107

This worked very well for me:

const sw: ServiceWorkerGlobalScope = self as unknown as ServiceWorkerGlobalScope;

Now you replace self with sw, which kinda makes more sense, and also you get correct types.

Upvotes: 1

brunnerh
brunnerh

Reputation: 184947

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...

Upvotes: 7

Related Questions