RxJS 更新后无法编译 Angular2 TS 代码答案

【问题标题】：Can't compile Angular2 TS code after RxJS updateRxJS 更新后无法编译 Angular2 TS 代码
【发布时间】：2018-02-02 14:46:38
【问题描述】：

由于我已将我的 RxJS 更新到最新版本（5.4.3 并且无法降级），我遇到了这个错误：

错误:(94, 9) TS2322:Type 'Promise' is not 可分配给类型“承诺”。 'then' 的属性类型是不相容。类型 '(onfulfilled?: (value: number | ErrorObser...' 不可分配输入 '{ (onFulfilled?: (value: number) => U | Thenable, onRejected?: (error: any) => U |然后可以...'。参数 'onfulfilled' 和 'onFulfilled' 的类型不兼容。参数 'value' 和 'value' 的类型不兼容。输入'号码 | ErrorObservable' 不可分配给类型 'number'。类型 'ErrorObservable' 不可分配给类型 'number'。

这是我的代码：

countFiles(from:any = false, limit:any = false, search: any = null, parent_page_id: any = ''): Promise<number> {
         (...) // Some code

        return this.http
            .post(this.apiUrl + 'v1/countFiles', JSON.stringify(params), {headers: headers})
            .toPromise()
            .then(response => <number> response.json()['count'])
            .catch(this.handleError);

    }

错误处理函数：

private handleError(error: any) {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';


        if(typeof error._body !== 'undefined') {
            let body = <HTMLElement> document.querySelector('body');
            body.innerHTML = '';
            document.write(error._body);
        }

        this.alertService.addAlert('error','error.general');

        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }

有人可以帮忙吗？

【问题讨论】：

我第二个 Kld，确切地说是 2.4.2
您也应该包含handleError 的代码。
@dockleryxk - 我不明白你。我在 RxJS 版本中犯了一个错误。是 5.4.3，而不是 5.4.2，但我不知道您在写评论时的想法。
@cartant - 我已经在帖子中添加了它。谢谢！
Kld 删除了他们的评论，这让我看起来像个白痴！他们的评论说要检查你的打字稿是 2.4 版

标签： angular rxjs

【解决方案1】：

我找到了解决方案。由于某种原因，它需要在返回“then”函数中更改为。下面我发布工作代码。

countFiles(from:any = false, limit:any = false, search: any = null, parent_page_id: any = ''): Promise<number> {
         (...) // Some code

        return this.http
            .post(this.apiUrl + 'v1/countFiles', JSON.stringify(params), {headers: headers})
            .toPromise()
            .then(response => <any> response.json()['count'])
            .catch(this.handleError);

    }

没有其他任何改变。

【讨论】：

【解决方案2】：

问题是countFiles被定义为返回Promise<number>：

countFiles(
  from: any = false,
  limit: any = false,
  search: any = null,
  parent_page_id: any = ''
): Promise<number> {
  // ...
  return this.http
    .post(this.apiUrl + 'v1/countFiles', JSON.stringify(params), { headers: headers })
    .toPromise()
    .then(response => <number>response.json()['count'])
    .catch(this.handleError);
}

它使用toPromise 将可观察对象转换为承诺。（我假设您这样做有充分的理由，因为将可观察对象转换为承诺被认为是一种反模式。）因此，handleError 传递给的 catch 是承诺链的一部分 - 而不是可观察链。

但是，handleError 返回一个 observable：

private handleError(error: any) {
  // ...
  return Observable.throw(errMsg);
}

不返回 observable，而是抛出错误。

你还有另一个问题。在handleError 中，您使用this。但是，当您将其传递给 catch 时，它将不受您认为的约束，如下所示：

catch(this.handleError)

你可以用箭头函数解决这个问题：

catch(error => this.handleError(error))

关于您的修复，它“有效”，因为 Promise<ErrorObservable> 与 Promise<any> 兼容，因此 TypeScript 不会抱怨。但它不会按您预期的方式工作 - 不会引发错误。

【讨论】：