Generic type 'Observable' requires 1 type argument

Question

Below Angular 2 (TypeScript) code gave me below 3 error, how to resolve them. please suggest.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";

@Component({
    selector: 'http-client',
    template: `<h1>All Products</h1>
  <ul>
    <li *ngFor="let product of products">
       {{product.title}}
    </li>
  </ul>
  `})
class AppComponent {

    products: Array<string> = [];

    theDataSource: Observable;

    constructor(private http: Http) {

        this.theDataSource = this.http.get('api/products/')
            .map(res => res.json());
    }

    ngOnInit() {
        // Get the data from the server
        this.theDataSource.subscribe(
            data => {
                if (Array.isArray(data)) {
                    this.products = data;
                } else {
                    this.products.push(data);
                }
            },
            err =>
                console.log("Can't get products. Error code: %s, URL: %s ", err.status, err.url),
            () => console.log('Product(s) are retrieved')
        );
    }
}

@NgModule({
    imports: [BrowserModule,
        HttpModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Error are,

1. TS2314 Generic type 'Observable' requires 1 type argument(s).
2. TS7006 Parameter 'data' implicitly has an 'any' type.
3. TS7006 Parameter 'err' implicitly has an 'any' type.

Answer 1

theDataSource: Observable<any>;

where any can (or should be if possible) be a more concrete type that matches the type of the values it is supposed to emit.

Answer 2

If you look in source of Angular Http module you can find method request of Http class

https://github.com/angular/angular/blob/2.4.1/modules/%40angular/http/src/http.ts#L111

All other methods (get, post, etc. ) wrap this request. Also you can see that request returns an Observable with generic of Response class. Response class is a part of Http module, so your code can be modified to this:

import { HttpModule, Http, Response } from '@angular/http';
...
theDataSource: Observable<Response>;

Or, if you do not need this strong typification you can pass any as parameter of generic

theDataSource: Observable<any>;

But in my opinion - strong typification is better choice.

Answer 3

1) theDataSource: Observable; -> theDataSource: Observable<any>;

2/3) you can add "noImplicitAny": false to your tsconfig.json

or change data => and err => with (data: any) => and (err: any) =>

Answer 4

The best thing to do here imo is set it up as theDataSource: Observable<Response>; because that is in fact the type based on your work in the constructor. I'd avoid any like a plague.

Side note, I know it doesn't help with your property here, but when trying to do this with methods you can do

  type MethodPayload<T> = {
    something: string;
    data: T;
  }

  methodName<T>(payload: MethodPayload<T>) {
    // thing with payload
  }

Answer 5

Fixed the issue by command: npm install @types/googlemaps@3.39.12 --save-dev

Answer 6

Could it be just the missing angle brackets?

Observable(PhotosResult) instead of Observable<PhotosResult>