通用类型 'Observable<T>' 需要 1 个类型参数答案

【问题标题】：Generic type 'Observable<T>' requires 1 type argument通用类型 'Observable<T>' 需要 1 个类型参数
【发布时间】：2017-06-05 02:09:56
【问题描述】：

Below Angular 2 (TypeScript) 代码给了我以下 3 错误，如何解决它们。请提出建议。

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);

错误是，

TS2314 泛型类型“可观察”需要 1 个类型参数。
TS7006 参数“数据”隐式具有“任何”类型。
TS7006 参数 'err' 隐式具有 'any' 类型。

【问题讨论】：

标签： angular typescript

【解决方案1】：

theDataSource: Observable<any>;

any 可以（或应该是）是一个更具体的类型，与它应该发出的值的类型相匹配。

【讨论】：

【解决方案2】：

如果您查看 Angular Http 模块的源代码，您可以找到 Http 类的方法 request

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

所有其他方法（get、post 等）包装这个请求。您还可以看到该请求返回一个具有通用响应类的 Observable。响应类是 Http 模块的一部分，所以你的代码可以修改成这样：

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

或者，如果您不需要这种强类型化，您可以将 any 作为泛型参数传递

theDataSource: Observable<any>;

但在我看来 - 强类型化是更好的选择。

【讨论】：

【解决方案3】：

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

2/3) 您可以将"noImplicitAny": false 添加到您的tsconfig.json

或将data => 和err => 更改为(data: any) => 和(err: any) =>

【讨论】：

【解决方案4】：

这里 imo 最好将其设置为 theDataSource: Observable<Response>;，因为这实际上是基于您在构造函数中工作的类型。我会像瘟疫一样避免any。

旁注，我知道这对您的财产没有帮助，但是当您尝试使用可以做到的方法时

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

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

【讨论】：

【解决方案5】：

难道只是缺少尖括号？

Observable(PhotosResult) 而不是Observable<PhotosResult>

【讨论】：