Angular4升级至6后报TS2322：Observable嵌套类型无法赋值错误

错误根因 #

• 首要原因是buildHeaders()方法的返回类型被定义为Observable<any>，TypeScript无法正确推导流中发射值的实际类型为HttpHeaders，在调用mergeMap时类型推导失效，误将内层http.get返回的Observable<MyObject>当成了流发射的值，最终推导整个方法返回类型为嵌套的Observable<Observable<MyObject>>，和声明的返回类型不匹配。
• 你测试发现的未启用鉴权的分支进一步加剧了类型推导问题：该分支中你将HttpHeaders实例包裹在无泛型声明的Promise中，TypeScript无法推导该Promise的返回值类型，进一步丢失了类型信息。此外该分支的Promise包装属于完全冗余的写法，没有实际作用。

正确修复方案 #

1. 给buildHeaders()明确正确的返回类型Observable<HttpHeaders>，替换模糊的any类型
2. 简化未启用鉴权分支的代码，直接用RxJS的of()操作符返回HttpHeaders实例，去掉冗余的Promise包装
3. 原有业务逻辑不需要调整，也无需修改getUsers方法的返回类型

修复后的完整代码 #

import { of, Observable, from } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http';

// ...其他服务代码

// 明确返回类型为Observable<HttpHeaders>
buildHeaders(): Observable<HttpHeaders> {
  if (!auth.enabled) {
    // 直接用of返回实例，移除冗余Promise包装
    return of(new HttpHeaders());
  }

  return from(this.authService.getHeaders())
    .pipe(
      map(header => {
        return new HttpHeaders(header);
      })
    );
}

getUsers(id: number): Observable<MyObject> {
  const path = `${url}/Users/${id}`;

  return this.buildHeaders()
    .pipe(
      mergeMap(headers => {
        return this.http.get<MyObject>(path, { 'headers': headers });
      })
    );
}

修复后TypeScript可以正确推导出所有流的类型，TS2322报错会直接消失。

内容的提问来源于stack exchange，提问作者HC1122