Service Worker Typings to Supplement lib.webworker.ts

serviceworker.d.ts

/**
 * Copyright (c) 2018, Tiernan Cridland
 *
 * Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby
 * granted, provided that the above copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
 * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
 * IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 * PERFORMANCE OF THIS SOFTWARE.
 *
 * Service Worker Typings to supplement lib.webworker.ts
 * @author Tiernan Cridland
 * @email [email protected]
 * @license: ISC
 *
 * lib.webworker.d.ts as well as an es5+ library (es5, es2015, etc) are required.
 * Recommended to be used with a triple slash directive in the files requiring the typings only.
 * e.g. your-service-worker.js, register-service-worker.js
 * e.g. /// <reference path="path/to/serviceworker.d.ts" />
 */

// Registration

interface WorkerNavigator {
	readonly serviceWorker: ServiceWorkerContainer;
}

interface ServiceWorkerContainer {
	readonly controller: ServiceWorker;
	readonly ready: Promise<ServiceWorkerRegistration>;
	oncontrollerchange: ((this: ServiceWorkerContainer, event: Event) => any) | null;
	onerror: ((this: ServiceWorkerContainer, event?: Event) => any) | null;
	onmessage: ((this: ServiceWorkerContainer, event: ServiceWorkerMessageEvent) => any) | null;
	getRegistration(scope?: string): Promise<ServiceWorkerRegistration>;
	getRegistrations(): Promise<ServiceWorkerRegistration[]>;
	register(url: string, options?: ServiceWorkerRegistrationOptions): Promise<ServiceWorkerRegistration>;
}

interface ServiceWorkerMessageEvent extends Event {
	readonly data: any;
	readonly lastEventId: string;
	readonly origin: string;
	readonly ports: ReadonlyArray<MessagePort> | null;
	readonly source: ServiceWorker | MessagePort | null;
}

interface ServiceWorkerRegistrationOptions {
	scope?: string;
}

// Client API

interface Client {
	readonly frameType: ClientFrameType;
}

type ClientFrameType = "auxiliary" | "top-level" | "nested" | "none";

// Events

interface ActivateEvent extends ExtendableEvent {
}

interface InstallEvent extends ExtendableEvent {
	readonly activeWorker: ServiceWorker;
}

// Fetch API

interface Body {
	readonly body: ReadableStream;
}

interface Headers {
	entries(): string[][];
	keys(): string[];
	values(): string[];
}

interface Response extends Body {
	readonly useFinalURL: boolean;
	clone(): Response;
	error(): Response;
	redirect(): Response;
}

// Notification API

interface Notification {
	readonly actions: NotificationAction[];
	readonly requireInteraction: boolean;
	readonly silent: boolean;
	readonly tag: string;
	readonly renotify: boolean;
	readonly timestamp: number;
	readonly title: string;
	readonly vibrate: number[];
	close(): void;
	requestPermission(): Promise<string>;
}

interface NotificationAction {
}

// ServiceWorkerGlobalScope

declare var clients: Clients;
declare var onactivate: ((event?: ActivateEvent) => any) | null;
declare var onfetch: ((event?: FetchEvent) => any) | null;
declare var oninstall: ((event?: InstallEvent) => any) | null;
declare var onnotificationclick: ((event?: NotificationEvent) => any) | null;
declare var onnotificationclose: ((event?: NotificationEvent) => any) | null;
declare var onpush: ((event?: PushEvent) => any) | null;
declare var onpushsubscriptionchange: (() => any) | null;
declare var onsync: ((event?: SyncEvent) => any) | null;
declare var registration: ServiceWorkerRegistration;

declare function skipWaiting(): void;

This is a great definition file but I get a bunch of errors when using it, not sure what I am doing wrong:

src/integrations/browser/serviceworkers.d.ts:37:3 - error TS2717: Subsequent property declarations must have the same type.  Property 'onmessage' must be of type '(this: ServiceWorkerContainer, ev: MessageEvent<any>) => any', but here has type '(this: ServiceWorkerContainer, event: ServiceWorkerMessageEvent) => any'.

37   onmessage:
     ~~~~~~~~~

  ../../node_modules/typescript/lib/lib.dom.d.ts:13156:5
    13156     onmessage: ((this: ServiceWorkerContainer, ev: MessageEvent) => any) | null;
              ~~~~~~~~~
    'onmessage' was also declared here.

src/integrations/browser/serviceworkers.d.ts:70:33 - error TS2304: Cannot find name 'ExtendableEvent'.

70 interface ActivateEvent extends ExtendableEvent {}
                                   ~~~~~~~~~~~~~~~

src/integrations/browser/serviceworkers.d.ts:72:32 - error TS2304: Cannot find name 'ExtendableEvent'.

72 interface InstallEvent extends ExtendableEvent {
                                  ~~~~~~~~~~~~~~~

src/integrations/browser/serviceworkers.d.ts:79:12 - error TS2717: Subsequent property declarations must have the same type.  Property 'body' must be of type 'ReadableStream<Uint8Array>', but here has type 'ReadableStream<any>'.

79   readonly body: ReadableStream;
              ~~~~

  ../../node_modules/typescript/lib/lib.dom.d.ts:2432:14
    2432     readonly body: ReadableStream<Uint8Array> | null;
                      ~~~~
    'body' was also declared here.

src/integrations/browser/serviceworkers.d.ts:114:22 - error TS2552: Cannot find name 'Clients'. Did you mean 'Client'?

114 declare var clients: Clients;
                         ~~~~~~~

src/integrations/browser/serviceworkers.d.ts:116:32 - error TS2552: Cannot find name 'FetchEvent'. Did you mean 'TouchEvent'?

116 declare var onfetch: ((event?: FetchEvent) => any) | null;
                                   ~~~~~~~~~~

  ../../node_modules/typescript/lib/lib.dom.d.ts:13890:13
    13890 declare var TouchEvent: {
                      ~~~~~~~~~~
    'TouchEvent' is declared here.

src/integrations/browser/serviceworkers.d.ts:118:44 - error TS2304: Cannot find name 'NotificationEvent'.

118 declare var onnotificationclick: ((event?: NotificationEvent) => any) | null;
                                               ~~~~~~~~~~~~~~~~~

src/integrations/browser/serviceworkers.d.ts:119:44 - error TS2304: Cannot find name 'NotificationEvent'.

119 declare var onnotificationclose: ((event?: NotificationEvent) => any) | null;
                                               ~~~~~~~~~~~~~~~~~

src/integrations/browser/serviceworkers.d.ts:120:31 - error TS2304: Cannot find name 'PushEvent'.

120 declare var onpush: ((event?: PushEvent) => any) | null;
                                  ~~~~~~~~~

src/integrations/browser/serviceworkers.d.ts:122:31 - error TS2304: Cannot find name 'SyncEvent'.

122 declare var onsync: ((event?: SyncEvent) => any) | null;

If I add webworker lib to the service worker like this:

/// <reference no-default-lib="true"/>
/// <reference lib="webworker" />
/// <reference types="./serviceworkers" />

then I get even more errors and conflicts. Any ideas?

$ tsc
../../node_modules/typescript/lib/lib.dom.d.ts:25:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: ImportExportKind, TableKind, ValueType, ExportValue, Exports, ImportValue, Imports, ModuleImports, name, AlgorithmIdentifier, BigInteger, BinaryData, BlobPart, BodyInit, BufferSource, CanvasImageSource, DOMHighResTimeStamp, EpochTimeStamp, EventListenerOrEventListenerObject, Float32List, FormDataEntryValue, GLbitfield, GLboolean, GLclampf, GLenum, GLfloat, GLint, GLint64, GLintptr, GLsizei, GLsizeiptr, GLuint, GLuint64, HashAlgorithmIdentifier, HeadersInit, IDBValidKey, ImageBitmapSource, Int32List, MessageEventSource, NamedCurve, OnErrorEventHandler, PerformanceEntryList, ReadableStreamController, ReadableStreamDefaultReadResult, ReadableStreamReader, RequestInfo, TexImageSource, TimerHandler, Transferable, Uint32List, VibratePattern, XMLHttpRequestBodyInit, BinaryType, ClientTypes, ColorGamut, ColorSpaceConversion, ConnectionType, DocumentVisibilityState, EndingType, FileSystemHandleKind, FontFaceLoadStatus, FontFaceSetLoadStatus, HdrMetadataType, IDBCursorDirection, IDBRequestReadyState, IDBTransactionDurability, IDBTransactionMode, ImageOrientation, KeyFormat, KeyType, KeyUsage, LockMode, MediaDecodingType, MediaEncodingType, NotificationDirection, NotificationPermission, PermissionName, PermissionState, PredefinedColorSpace, PremultiplyAlpha, PushEncryptionKeyName, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResizeQuality, ResponseType, SecurityPolicyViolationEventDisposition, ServiceWorkerState, ServiceWorkerUpdateViaCache, TransferFunction, WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType

25 interface AddEventListenerOptions extends EventListenerOptions {
   ~~~~~~~~~

  ../../node_modules/typescript/lib/lib.webworker.d.ts:25:1
    25 interface AddEventListenerOptions extends EventListenerOptions {
       ~~~~~~~~~
    Conflicts are in this file.

../../node_modules/typescript/lib/lib.dom.d.ts:4001:5 - error TS2374: Duplicate index signature for type 'number'.

4001     [index: number]: string;
         ~~~~~~~~~~~~~~~~~~~~~~~~