0

Scenario

I would like to change my service-worker file from javascript to typescript for better maintenance. Here is my sw.js file:

/* eslint-disable no-console */
self.addEventListener("push", (event) => {
  ...
});
...more handlers

Problem

I've changed a lot of lines to adapt my code to TS and ESlint requirements, but I have problem with self I recieve 2 errors from ESlint:

unexpected use of 'self' 
self is not defined

How to define self in Typescript file?

zolty13
  • 1,943
  • 3
  • 17
  • 34

1 Answers1

2

In tsconfig.json file it is needed to add webworker library

{
 ....
  "compilerOptions": {
  "lib": [
    ...
    "webworker"
  ],...
}

After adding webworker library it is possible to declare self with typescript ServiceWorkerGlobalScope.

ServiceWorkerGlobalScope interface of the ServiceWorker API represents the global execution context of a service worker.

declare const self: ServiceWorkerGlobalScope;

If you have set isolatedModules flag to true in you tsconfig.json then you also need to add some import or export directive to your service worker file, because:

Typescript treats files without import/exports as legacy script files. As such files are not modules and any definitions they have get merged in the global namespace. isolatedModules flag forbids such files.

If you do not need any import or export the handies way to make a file a module is add export { }; stack question describing this problem

At the end it is possible to use full typescript syntax in sw.ts file.

zolty13
  • 1,943
  • 3
  • 17
  • 34
  • Unfortunately, "WebWorker" is incompatible with "DOM". Adding both to "lib" results in an error: "lib.dom.d.ts(25,1): error TS6200: Definitions of the following identifiers conflict with those in another file". More details: https://github.com/microsoft/TypeScript/issues/14877 – Ivan Rubinson Nov 26 '21 at 05:26