键入'Observable<Response \ Observable<Response>>‘不能指定键入'Observable<Response>’

Question

我有一个简单的服务，内容如下：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AddressService {

  constructor(private http: Http) { }

  getAnything = (): Observable<Response> => {
    return this.http.get('https://my_api.com')
      .map(this.handleSuccess)
      .catch(this.handleError);
  }

  handleError = (error: Response): Observable<Response> => {
    return Observable.throw(error || 'Server Error');
  }

  handleSuccess = (response: Response): Observable<Response> => {
    let body;

    if (response.text()) {
      body = response.json();
    }

    return body || {};
  }
}

它运行得很好，直到i将打字本从2.3.4升级到2.4.1。

现在，在升级之后，我得到了一个奇怪的错误：

Type 'Observable<Response | Observable<Response>>' is not assignable to type 'Observable<Response>'

这里有什么意义？在TS 2.4.x中有哪些变化使我的应用程序停止正常工作？

Answer 1

TypeScript 2.4引入了更好的泛型检查。它突出显示了应该修复的代码中的错误。

例如，handleSuccess的返回类型与它正在返回的内容不匹配；它返回一个匿名对象，但被键入为返回Observable<Response>。因为它是与map一起使用的，所以您最终会得到一个可观察的组合，它被输入为Observable<Response | Observable<Response>>。

你所看到的错误是真实的，应该被修正。

Answer 2

更改更强的类型检查。

Observable<Response>不能分配给键入为Response的东西，因为它们是不同的类型。为了简洁起见，让我们将这些类型称为X和Y

Observable<X | Y>不能分配给输入为Y的东西，因为它可能包含Y，但也可能包含X，这是2.4.1版中引入的更严格的检查所拒绝的。

将表达式的值捕获到let变量并返回该变量。然后，您将能够检查变量的类型，这将显示它不兼容，正如编译器报告的那样。

要使代码编译，您应该在转换之前测试正确类型的实例。

如果你没有时间清理你的代码库，你可以用--noStrictGenericChecks拨回更强的类型检查。

这里有一些实际的TS代码，它的问题与您的类似。在本例中，FieldInstance没有表单属性，但是FormInstance有一个表单属性，这允许我区分它们并处理类型歧义。FieldInstanceRepeater可以分配给FieldInstance，因为它是后代。

constructor(scope: FormInstance | FieldInstanceRepeater, field: IFormFieldRow) {
  this.FormInstance = ((function getFormInstance(fi: FormInstance | FieldInstance): FormInstance | FieldInstance {
    let isFormInstance = !!(fi as FormInstance).Form;
    return isFormInstance ? fi : getFormInstance((fi as FieldInstance).Scope);
  })(scope) as FormInstance);
  this.Scope = scope;
  ...
}

Answer 3

考虑执行以下更改：

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
import { _throw } from 'rxjs/observable/throw';

export interface Data{} // an interface to define the object in JSON format returned by your backend

@Injectable()
export class AddressService {

  constructor(private http: Http) { }

  getAnything = (): Observable<Data> => {
    return this.http.get('https://my_api.com')
      .map(this.handleSuccess)
      .catch(this.handleError);
  }

  handleError = (error: Response) : ErrorObservable { // The return type is ErrorObservable, which is a specialization of Observable<any>
    return _throw(error || 'Server Error');
  }

  handleSuccess = (response: Response) { // the return here is any, as you dont know how do the POJO(s) generated by response.json() look like
    let body;

    if (response.text()) {
      body = response.json();
    }

    return body || {};
  }
}

新版本的类型记录引入了更强的类型/泛型检测，因此编译器为什么抱怨当前的方法，因为它们的返回类型不匹配。

在最新的release版本中，重做了http客户端，以避免解析非类型化POJO(调用r.json())。为此目的，新的http方法是通用的，因此开发人员现在可以在提取响应内容时直接映射到类型中。有关更多信息，请看一看此链接