Angular 5, TypeScript observable issue

Question

Trying to get a messaging app to work, but I cannot seem to get past an TS error.

The Editor syntax checker - shows this error Type 'Observable<{}>' is not assignable to type 'Observable'. Type '{}' is not assignable to type 'MessageThread[]'. Property 'includes' is missing in type '{}'.

the CODE

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

import { MessageThread } from './message-thread.model';

@Injectable()
export class MessageThreadService {

    private getMessageThreadsUrl = 'api/message-thread/get';  // URL to web API
    private postMessageThreadsUrl = 'api/message-thread/post';  // URL to web API

    constructor(private http: Http) { }

    private socket;
    private url = window.location.origin;

    /*
    * Get MessageThreads from server
    */
    getMessageThreads(): Observable<MessageThread[]> {
        const observable = new Observable(observer => {
            console.log('Socket:', this.url);
            this.socket = io(this.url);
            this.socket.on('refreshMessageThreads', (data) => {
                observer.next(data);
            });

            return () => {
                this.socket.disconnect();
            };
        });

        return observable; // **** THIS LINE SHOWS ERROR ****
    }

...

the angular transpiler throws this error

ERROR in src/app/components/messages/message-thread.service.ts(35,3): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable'. Type '{}' is not assignable to type 'MessageThread[]'. Property 'includes' is missing in type '{}'.

Tee Message Thread Model looks like this:

export class MessageThread {
    constructor(
        public messageThread: string
    ) { }

}

help is greatly appreciated.

You aren't providing the generic type for the observable anywhere, so it defaults to {}, which isn't an array of message threads. — jonrsharpe
– jonrsharpe, Commented Jun 22, 2018 at 22:50

kingdaro · Accepted Answer · 2018-06-22 23:39:12Z

1

The key to the issue is this part of the error:

Type 'Observable<{}>' is not assignable to type 'Observable'.
Type '{}' is not assignable to type 'MessageThread[]'.

When you make an instance of a class that requires a generic, TypeScript will default that generic to {} when it can't be inferred elsewhere. In this case, these two are the same:

const observable = new Observable(observer => {
const observable = new Observable<{}>(observer => {

Then, it complains when you try to return Observable<{}> to a function typed to return Observable<MessageThread[]>. The solution is to specify the generic yourself:

const observable = new Observable<MessageThread[]>(observer => {

answered Jun 22, 2018 at 23:39

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Angular 5, TypeScript observable issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related