title: Angular2 @ TypeScript error rxjs/Subject:: filtering when user stops typing
body: <p>I am using Angular 2.0.0-beta.0 and TypeScript 1.7.5. while trying to change the clever filter on:</p>
  
  <p><a href="https://angular.io/docs/ts/latest/guide/server-communication.html#!#more-observables" rel="nofollow">https://angular.io/docs/ts/latest/guide/server-communication.html#!#more-observables</a></p>
  
  <p>The "clever" filter should only do something when the user stops typing. </p>
  
  <p>I get compile error:</p>
  
  <pre><code>Error:(30, 20) TS2345: Argument of type '(term: string) =&gt; void' is not assignable to parameter of type '(x: {}, ix: number) =&gt; Observable&lt;any&gt;'. Type 'void' is not assignable to type 'Observable&lt;any&gt;'.
  </code></pre>
  
  <p>Run time error:</p>
  
  <pre><code>EXCEPTION: Error during instantiation of Test!.  
  ORIGINAL EXCEPTION: TypeError: this._searchTermStream.debounceTime is not a function
  </code></pre>
  
  <p>test.ts</p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {Component} from 'angular2/core';
  import {Observable}        from 'rxjs/Observable';
  import {Subject}           from 'rxjs/Subject';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;h3&gt;Test&lt;/h3&gt;
          Filter basic &lt;input #filterBasic (keyup)="searchBasic(filterBasic.value)"/&gt;&lt;br&gt;
          Filter clever &lt;input #filterClever (keyup)="searchClever(filterClever.value)"/&gt;
          &lt;ul&gt;
              &lt;li *ngFor="#contact of contactsFilter"&gt;{{contact}}&lt;/li&gt;
          &lt;/ul&gt;
      `
  })
  
  export class Test {
  
      public contacts: string[] = ["John", "Kaen", "Kath", "Joop", "Joost"];
      public contactsFilter: string[] = this.contacts;
  
      private _searchTermStream = new Subject&lt;string&gt;();
  
      private items:Observable&lt;string[]&gt; = this._searchTermStream
          .debounceTime(300)
          .distinctUntilChanged()
          .switchMap((term: string) =&gt; this.contactFilter(term));
  
      constructor () {}
  
      searchBasic(term: string) {
          console.log("Filter Basic " + term + " called");
          this.contactFilter(term);
      }
  
      searchClever(term: string) {
          console.log("Filter Clever " + term + " called");
          this._searchTermStream.next(term);
      }
  
      contactFilter(term: string) {
          this.contactsFilter = this.contacts.filter(item =&gt; (item.indexOf(term) &gt;= 0))
      }
  }
  
  bootstrap(Test);
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;base href="/"&gt;
      &lt;script src="angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="typescript/lib/typescript.js"&gt;&lt;/script&gt;
      &lt;script src="systemjs/dist/system.js"&gt;&lt;/script&gt;
      &lt;script src="angular2/bundles/router.dev.js"&gt;&lt;/script&gt;
      &lt;script src="rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="angular2/bundles/angular2.js"&gt;&lt;/script&gt;
      &lt;script src="angular2/bundles/http.dev.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"&gt;
      &lt;script&gt;
        System.config({
          transpiler: 'typescript',
          typescriptOptions: { emitDecoratorMetadata: true },
          packages: {'components': {defaultExtension: 'ts'}}
        });
        System.import('components/test')
              .then(null, console.error.bind(console));
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>