Workbox: Link to TypeScript definitions for workbox-sw

[matthew-a-thomas]

Library Affected:
workbox-sw

Browser & Platform:
all browsers

Issue or Feature Request Description:
Please add TypeScript support. 😃

https://github.com/GoogleChrome/workbox/issues/217 ended with this:

Gonna close this until someone requests it.

So perhaps this can be the "official" request.

[jeffposnick]

Apologies, but we've come to the conclusion at https://github.com/GoogleChrome/workbox/pull/1436#issuecomment-396678604 that we're not going to host first-party definitions in this repo (at least not at this time).

[matthew-a-thomas]

Apologies

stale typings seem inevitable as we make changes to the codebase

@jeffposnick No worries. I understand the reasoning. I'll keep an eye out for @types/workbox-sw.

[wessberg]

@matthew-a-thomas
The typings have been published:
https://www.npmjs.com/package/@types/workbox-sw

[jeffposnick]

Thanks! I'll re-open this issue to track linking to them.

[Manc]

@matthew-a-thomas
The typings have been published:
https://www.npmjs.com/package/@types/workbox-sw

Hi @wessberg,
It's quite possible that I'm getting something wrong here. I installed @types/workbox-sw, but don't have a clue how to use it. I added it to my tsconfig.json:

{
    "compilerOptions": {
        /* … */
        "types": [
            "workbox-sw"
        ]
    },
    /* … */
}

Then in my serviceworker.ts:

declare var self: ServiceWorkerGlobalScope;
export default null;

workbox.whatever... // [ts] Cannot find name 'workbox'.

I also tried stuff like this:

import WorkboxNamespace from 'workbox-sw';
declare var workbox: WorkboxNamespace;

I am expecting to get the workbox variable defined. I'm having doubts now if this is even the purpose of @types/workbox-sw.

Sorry for being more or less off topic with my question, but it might help others too... Thanks for understanding and any hints that might help me get this working!

[wessberg]

@manc,

First, you don' have to add anything to your tsconfig.json file. Typescript automatically discovers type declarations located within the @types folder in node_modules. So you can just go ahead and remove the "types" array that you added to your config 🙂.

Now, on to your question. There are two ways to go here:

A) If you use Workbox by importing directly from workbox-sw, you should install workbox-sw as well as @types/workbox-sw.

Now you can do:

import workbox from "workbox-sw";

workbox.routing.registerRoute(
  new RegExp("..."),
  workbox.strategies.networkFirst()
);

B) If you use Workbox via the officially recommended importScripts(...), you can inform Typescript that workbox is defined in the scope, for example with a type import:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');

// Declare workbox
declare const workbox: typeof import("workbox-sw").default;

workbox.routing.registerRoute(
  new RegExp("..."),
  workbox.strategies.networkFirst()
);

[Manc]

@wessberg Thank you so much! I must admit, I have never seen a declaration like this (declare const workbox: typeof import("workbox-sw").default) before. It works perfectly.