title: Interface based programming with TypeScript, Angular 2 & SystemJS
body: <p>I'm currently trying to clean up some code in order to program against interfaces rather than against implementations but can't figure out how to.</p>
  
  <p>To be more specific, I'm using:
  * TypeScript 1.5.0 beta -> transpiled to ES5 / commonjs
  * SystemJS to load the modules</p>
  
  <p>I currently try to use external modules as follows:</p>
  
  <p>posts.service.ts file:</p>
  
  <pre><code>///&lt;reference path="../../../typings/tsd.d.ts" /&gt;
  ///&lt;reference path="../../../typings/typescriptApp.d.ts" /&gt;
  ...
  export interface PostsService{ // 1
      fetchPosts(): Rx.Observable&lt;any&gt;;
  }
  export var PostsService:PostsServiceImpl; // 2
  ...
  export class PostsServiceImpl implements PostsService { // 3
      ...
      constructor(){
          console.log('Loading the Posts service');
  }
  ...
  fetchPosts(): Rx.Observable&lt;any&gt;{ 
     ...
  }
  </code></pre>
  
  <p>and that module is imported in posts.ts:</p>
  
  <pre><code>    ///&lt;reference path="../../../typings/tsd.d.ts" /&gt;
      ///&lt;reference path="../../../typings/typescriptApp.d.ts" /&gt;
  
      import {PostsService, PostsServiceImpl} from 'components/posts/posts.service';
  
      @Component({
      selector: 'posts',
      viewInjector: [
          //PostsServiceImpl
          //PostsService
          bind(PostsService).toClass(PostsServiceImpl)
      ]
  })
  ...
  export class Posts {
      private postsServices: PostsService;
  
      constructor(postsService: PostsService) {
          console.log('Loading the Posts component');
          this.postsServices = postsService;
          ...
      }
  
      ...
  }
  </code></pre>
  
  <p>The above code compiles correctly, but basically my issue boils down to the fact that Angular won't inject an instance of PostsServiceImpl in the Posts component.</p>
  
  <p>Of course it's simply because I don't find the correct way to declare/export/import everything</p>
  
  <p>Without <code>export interface PostsService ...</code>, I get TS compilation errors because I use it in the posts controller.</p>
  
  <p>Without <code>export var PostsService:PostsServiceImpl;</code> I get TS compilation errors in the @View decorator's viewInjector</p>
  
  <p>In the generated js code I only find <code>exports.PostsService;</code> which is added because of the export var... I know that interfaces disappear at runtime.</p>
  
  <p>So I'm a bit lost in all this. Any practical ideas how I can use interface based programming w/ TypeScript &amp; Angular 2?</p>