TypeScript type definitions for ServiceWorker
<p>I'm writing a service for my angular 2 app using TypeScript. The service makes use of chrome's <code>ServiceWorker</code> to listen for push notifications (see <a href="https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en" rel="noreferrer" title="tutorial">tutorial</a>). The code (javascript) makes use of <code>navigator</code> first to see if <code>serviceWorker</code> is supported, then continues to complete registration etc., i.e.,</p>

<pre><code>if ('serviceWorker' in navigator) {
  console.log('Service Worker is supported');
  navigator.serviceWorker.register('sw.js').then(function() {
    return navigator.serviceWorker.ready;
  }).then(function(reg) {
    console.log('Service Worker is ready :^)', reg);
      // TODO
  }).catch(function(error) {
    console.log('Service Worker error :^(', error);
  });
}
</code></pre>

<p>I'd like to implemenet the above using TypeScript. However, the current <code>lib.d.ts</code> used by the TypeScript compiler (see below) appears to have no definitions defined on <code>Navigator</code> for the <code>serviceWorker</code> or its associated methods such as <code>serviceWorker.register</code> (I guess since it's a chrome-specific implementation).</p>

<pre><code>interface Navigator extends Object, NavigatorID, NavigatorOnLine, NavigatorContentUtils, NavigatorStorageUtils, NavigatorGeolocation, MSNavigatorDoNotTrack, MSFileSaver, NavigatorUserMedia {
    readonly appCodeName: string;
    readonly cookieEnabled: boolean;
    readonly language: string;
    readonly maxTouchPoints: number;
    readonly mimeTypes: MimeTypeArray;
    readonly msManipulationViewsEnabled: boolean;
    readonly msMaxTouchPoints: number;
    readonly msPointerEnabled: boolean;
    readonly plugins: PluginArray;
    readonly pointerEnabled: boolean;
    readonly webdriver: boolean;
    getGamepads(): Gamepad[];
    javaEnabled(): boolean;
    msLaunchUri(uri: string, successCallback?: MSLaunchUriCallback, noHandlerCallback?: MSLaunchUriCallback): void;
    requestMediaKeySystemAccess(keySystem: string, supportedConfigurations: MediaKeySystemConfiguration[]): PromiseLike&lt;MediaKeySystemAccess&gt;;
    vibrate(pattern: number | number[]): boolean;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}
</code></pre>

<p>The result is that I'm faced with compilation errors since the compiler can't find the associated <code>serviceWorker</code> types. Given I'm new to JavaScript and TypeScript, I'm trying to determine the best way to proceed. I understand the options to be:</p>

<ol>
<li>Keep the js code and simply ignore the compilation errors (not
ideal). </li>
<li>Keep the js code and somehow suppress the type errors during
    compilation. </li>
<li>Find an existing typescript definitions library that
    has <code>serviceWorker</code> defined and include that during compilation.</li>
<li>Write my own typescript definition file for navigator or somehow
    extend the existing <code>lib.d.ts</code></li>
</ol>

<p>Sage advice on the best option greatly appreciated.</p>

<p><strong>Update</strong></p>

<p>Attempted to cast to any to remove compilation errors, i.e.,</p>

<pre><code>var nav = &lt;any&gt; navigator;

    if ('serviceWorker' in nav) {
       nav.serviceWorker.register('sw.js')
           .then(function(reg) {
                    console.log('yey!', &lt;any&gt; reg);
           }).catch(function(err) {
                console.log('boo!', &lt;any&gt; err);
    });
</code></pre>

<p>but now facing new errors, i.e.,</p>

<pre><code>error TS7006: Parameter 'reg' implicitly has an 'any' type.
error TS7006: Parameter 'error' implicitly has an 'any' type.
</code></pre>

<p>Also, tempted to write definitions for the ServiceWorker using these <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/#navigator-service-worker" rel="noreferrer">details</a>. However never done it before, so will need some practice!</p>