Angular 2 rxjs switchmap returns Observable<Object>

Question

I'm building a typescript angular 2 app and using rxjs. I am following the example here:

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#stq=formgroup&stp=1

All though I am trying to strongly type my return signatures with typescript. This may be my problem in that you aren't supposed to. But it seems like you should be able to.

Suppose I have service that is typed to return an Observable>.

 public search(term: string) : Observable<Array<MyModel>> { // http call }

In my component I am attempting to listen to this observable stream and return the results.

 private search = new Subject<Search>();
 results: Observable<Array<MyModel>>;

 ngOnInit() {
     this.results = this.search
        .debounceTime(400)
        .distinctUntilChanged()
        .switchMap(search => {
            return service.search(search.term); // returns Observable<Array<MyModel>>
        });
  }

This doesn't compile with the message Cannot convert type Observable<Object> to type Observable<MyModel[]>>

I don't understand why switchmap is returning an Observable instead of my type. Do I need to map it again before giving it to results? Is this a typescript typings issue with the return signature of switchmap?

I had tried that but ignorantly casted the return statement instead of on the end of the switchmap chain which is where the cast belongs. That was a boneheaded thing to miss. Thanks! — twifosp
– twifosp, Commented Aug 11, 2016 at 16:03

Meir · Accepted Answer · 2016-08-12 19:29:22Z

2

Typescript might have wrong type inference, I would try one of the following:

give your handler a return type:

.switchMap((search): Observable<Array<MyModel>> => {
        return service.search(search.term); // returns Observable<Array<MyModel>>
    });

and if this doesn't work, "compromise" for changing the type of the results variable to:

 results: Observable<any>;

answered Aug 12, 2016 at 19:29

Meir

14.4k4 gold badges44 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

martin · Accepted Answer · 2016-09-19 21:25:53Z

0

The error message is actually right. However, it's unclear what line caused the error without a stack trace.

In the ngOnInit() method you call:

this.results = this.search
    .debounceTime(..)
    ...

This chain of operators always returns an Observable which is not as the result property expects (Observable<Array<MyModel>>) because the Subject's generic is Search.

Operator switchmap() returns always an Observable. Its return type has nothing to do with the callable.

You should be able to solve this by simply typecasting the result:

this.results = Observable<MyModel[]>this.search
    .debounceTime(..)
    ...

answered Sep 19, 2016 at 21:25

martin

97.4k26 gold badges205 silver badges237 bronze badges

Collectives™ on Stack Overflow

Angular 2 rxjs switchmap returns Observable<Object>

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related