title: Angular2 @ TypeScript Observable error
body: <p>I have an input field and when the user types a search string I want to wait for the user to stop typing for at least 300 milliseconds (debounce) before doing a _heroService http request. Only changed search values make it through to the service (distinctUntilChanged). The switchMap returns a new observable that combines these _heroService observables, re-arranges them in their original request order, and delivers to subscribers only the most recent search results.</p>
  
  <p>I am using Angular 2.0.0-beta.0 and TypeScript 1.7.5. </p>
  
  <p>How do I get this thing working correct?</p>
  
  <p>I get compile error:</p>
  
  <pre><code>Error:(33, 20) TS2345: Argument of type '(value: string) =&gt; Subscription&lt;Hero[]&gt;' is not assignable to parameter of type '(x: {}, ix: number) =&gt; Observable&lt;any&gt;'.Type 'Subscription&lt;Hero[]&gt;' is not assignable to type 'Observable&lt;any&gt;'. Property 'source' is missing in type 'Subscription&lt;Hero[]&gt;'.
  Error:(36, 31) TS2322: Type 'Hero[]' is not assignable to type 'Observable&lt;Hero[]&gt;'. Property 'source' is missing in type 'Hero[]'.
  </code></pre>
  
  <p>Run time error (after typing first key in search input field):</p>
  
  <pre><code>EXCEPTION: TypeError: unknown type returned
  STACKTRACE:
  TypeError: unknown type returned
  at Object.subscribeToResult (http://localhost:3000/rxjs/bundles/Rx.js:7082:25)
  at SwitchMapSubscriber._next (http://localhost:3000/rxjs/bundles/Rx.js:5523:63)
  at SwitchMapSubscriber.Subscriber.next (http://localhost:3000/rxjs/bundles/Rx.js:9500:14)
  ...
  -----async gap----- Error at _getStacktraceWithUncaughtError 
  EXCEPTION: Invalid argument '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe' in [heroes | async in Test@4:16]
  </code></pre>
  
  <p>test1.ts</p>
  
  <pre><code>import {bootstrap}         from 'angular2/platform/browser';
  import {Component}         from 'angular2/core';
  import {HTTP_PROVIDERS}    from 'angular2/http';
  
  import {Observable}        from 'rxjs/Observable';
  import {Subject}           from 'rxjs/Subject';
  import 'rxjs/Rx';
  
  import {Hero}              from './hero';
  import {HeroService}       from './hero.service';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;h3&gt;Test&lt;/h3&gt;
          Search &lt;input #inputUser (keyup)="search(inputUser.value)"/&gt;&lt;br&gt;
          &lt;ul&gt;
              &lt;li *ngFor="#hero of heroes | async"&gt;{{hero.name}}&lt;/li&gt;
          &lt;/ul&gt;
      `,
      providers: [HeroService, HTTP_PROVIDERS]
  })
  
  export class Test {
  
      public errorMessage: string;
  
      private _searchTermStream = new Subject&lt;string&gt;();
  
      private heroes: Observable&lt;Hero[]&gt; = this._searchTermStream
          .debounceTime(300)
          .distinctUntilChanged()
          .switchMap((value: string) =&gt;
              this._heroService.searchHeroes(value)
                  .subscribe(
                      heroes =&gt; this.heroes = heroes,
                      error =&gt;  this.errorMessage = &lt;any&gt;error)
          )
  
      constructor (private _heroService: HeroService) {}
  
      search(value: string) {
          this._searchTermStream.next(value);
      }
  }
  
  bootstrap(Test);
  </code></pre>
  
  <p>hero.ts</p>
  
  <pre><code>export interface Hero {
      _id: number,
      name: string
  }
  </code></pre>
  
  <p>hero.service.ts</p>
  
  <pre><code>import {Injectable}     from 'angular2/core';
  import {Http, Response} from 'angular2/http';
  import {Headers, RequestOptions} from 'angular2/http';
  import {Observable}     from 'rxjs/Observable';
  import 'rxjs/Rx';
  
  import {Hero}           from './hero';
  
  @Injectable()
  
  export class HeroService {
  
      private _heroesUrl = 'api/heroes';
  
      constructor (private http: Http) {}
  
      getHeroes () {
          return this.http.get(this._heroesUrl)
              .map(res =&gt; &lt;Hero[]&gt; res.json())
              .do(data =&gt; console.log(data))
              .catch(this.handleError);
      }
  
      searchHeroes (value) {
          return this.http.get(this._heroesUrl + '/search/' + value )
              .map(res =&gt; &lt;Hero[]&gt; res.json())
              .do(data =&gt; console.log(data))
              .catch(this.handleError);
      }
  
      addHero (name: string) : Observable&lt;Hero&gt;  {
  
          let body = JSON.stringify({name});
          let headers = new Headers({ 'Content-Type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
  
          return this.http.post(this._heroesUrl, body, options)
              .map(res =&gt;  &lt;Hero&gt; res.json())
              .do(data =&gt; console.log(data))
              .catch(this.handleError)
      }
  
      private handleError (error: Response) {
          // in a real world app, we may send the server to some remote logging infrastructure
          // instead of just logging it to the console
          console.log(error);
          return Observable.throw('Internal server error');
      }
  }
  </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/test1')
              .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>
  
  <p>Here is another version 'test2.ts' that works fine doing a http request after every (keyup) event:</p>
  
  <pre><code>import {bootstrap}         from 'angular2/platform/browser';
  import {Component}         from 'angular2/core';
  import {HTTP_PROVIDERS}    from 'angular2/http';
  
  import {Hero}              from './hero';
  import {HeroService}       from './hero.service';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;h3&gt;Test&lt;/h3&gt;
          Search &lt;input #inputUser (keyup)="search(inputUser.value)"/&gt;&lt;br&gt;
          &lt;ul&gt;
              &lt;li *ngFor="#hero of heroes"&gt;{{hero.name}}&lt;/li&gt;
          &lt;/ul&gt;
      `,
      providers: [HeroService, HTTP_PROVIDERS]
  })
  
  export class Test {
  
      public heroes:Hero[] = [];
      public errorMessage: string;
  
      constructor (private _heroService: HeroService) {}
  
      search(value: string) {
          if (value) {
              this._heroService.searchHeroes(value)
                  .subscribe(
                      heroes =&gt; this.heroes = heroes,
                      error =&gt;  this.errorMessage = &lt;any&gt;error);
          }
          else {
              this.heroes = [];
          }
      }
  }
  
  bootstrap(Test);
  </code></pre>