vscode 服务工作者接口对象自动完成

Question

Why vscode dose not see service worker interface objects?
lack of auto completion
While browser shows that they are still there
presence of object logged in browser
How to fix this?

whole service worker code:

self.addEventListener('install', event => {
    console.log('V1 installing…');
    event.waitUntil(
        caches.open('static-v1').then(cache => cache.add('/cat.png'))
    );
});

self.addEventListener('activate', event => {
    console.log('V1 now ready to handle fetches!');
});

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);
    if (url.origin == location.origin && url.pathname == '/dog.png') {
        event.respondWith(caches.match('/cat.png'));
    }

    if (url.origin == location.origin) {
        console.log("Clients object: ", clients);
    }
});

Answer 1

The easiest way is to use JSDOC syntax

/**@type {ServiceWorkerGlobalScope} sw */
const sw = self

and use the constant in your code.

sw.addEventListener('install', (ev) => {
  // the event argument will have ServiceWorker specific intellisense
  ev.wait
})

Excludes default libs such as 'dom' conflicting with 'webworker'

On the top of the file add

/// <reference no-default-lib="true"/>
/// <reference lib="esnext" />
/// <reference lib="webworker" />