title: using WorkerGlobalScope.importScripts() in typescript
body: <p>I am working on a service-worker for (Angular) web-apps. This service worker is made in Typescript. The web-app should serve the service-worker and a separate configuration.js file to configure the pre-build service-worker.</p>
  
  <p>Because the configuration is unique for each web-app, it is required that the configuration is not directly included in the service-worker. I want to use the same service-worker for multiple web-apps.</p>
  
  <p>using <a href="https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts" rel="nofollow noreferrer">WorkerGlobalScope.importScripts()</a> it is possible to import external resources into a service-worker's global scope. But how will this work with typescript?</p>
  
  <p>given the following code, how would one use importScripts() in typescript</p>
  
  <pre><code>interface IConfiguration {
      name: string;
  }
  
  let configuration: IConfiguration;
  
  const initialize = (service: ServiceWorkerGlobalScope): void =&gt; {
      service.addEventListener("install", (event) =&gt; {
          console.log("Installing Service-Worker");
  
          service.importScripts("SWConfiguration.js");
          configuration = new service.SWConfiguration()  // &lt;-- This won't compile
  
          return service.skipWaiting();
      });
  
      service.addEventListener("activate", (event) =&gt; {
          console.log("Activating Service-Worker");
          event.waitUntil(service.clients.claim());
      });
  
      service.addEventListener("fetch", (event) =&gt; {
  
          // Do something with the configuration
  
      });
  };
  
  initialize(self as any);
  </code></pre>
  
  <p>SWConfiguration.js would look something like:</p>
  
  <pre><code>public class SWConfiguration {
      name = "myName";
  }
  </code></pre>
  
  <p>How would one import a configuration that is served in a different file?</p>