title: Angular 6 service with interface
body: <p>I am building an application with Angular (<code>6.0.7</code>) and I am trying to create a service with the new:</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  </code></pre>
  
  <p>But how can I type an injection with an Interface?</p>
  
  <hr>
  
  <p><strong>The problem</strong></p>
  
  <p>I have 2 services, <strong>Authentication.service</strong> and <strong>SessionStorage.service</strong>. I want to inject the sessionstorage into the authentication service. That can be done via:</p>
  
  <pre><code>constructor(private sessionStorage: SessionStorage) {
  }
  </code></pre>
  
  <p>No problem there. But for Object Orientated purposes I want to have an <code>interface</code> above this service (so that I can implement both localstorage service as sessionstorage service). Thus it is only logical that I want to type the injected class with the interface, but this cannot be done the same way <a href="https://stackoverflow.com/questions/40068456/angular-2-interface-for-service">Angular 5 and lower does it</a>.</p>
  
  <p>So how can I type the injection into this global service with my interface?</p>
  
  <hr>
  
  <p><strong>I've tried</strong></p>
  
  <p>The Angular service typings describe an <code>InjectableProvider</code>, but this does not match any of the parameters of the siblings of <code>InjectableProvider</code>, so this gives a compiler (and tslint) error. </p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  }, {provide: IStorageService, useClass: SessionStorage})
  </code></pre>