Angular 5项目中rxjs 'of'操作符导入报错TS2305求助

你在Angular 5搭配RxJS 5.5.10时遇到的of操作符导入报错，我来帮你梳理下可行的解决方案：

问题根源 #

你当前使用的是RxJS 5.5.x，这个版本的导入规则和RxJS 6差异很大：

• 你尝试的import { Observable, of } from 'rxjs';是RxJS 6的写法，在5.5版本中不生效
• import { Observable, of } from 'rxjs/Observable';也不对，因为of并不是rxjs/Observable模块直接导出的成员

另外你原来的代码里导入了import 'rxjs/add/Observable/of';——这个导入是把of添加为Observable类的静态方法，所以不能直接调用of()，而要通过Observable.of()来使用。

方案1：适配现有代码的静态方法写法 #

修改你的HeroService代码，保留原有导入并调整调用方式：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/Observable/of'; // 保留这个导入，它给Observable类添加静态of方法
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
  constructor() { }

  getHeroes() : Observable<Hero[]> {
    return Observable.of(HEROES); // 改为通过Observable类调用of方法
  }
}

方案2：使用RxJS 5.5+推荐的可管道操作符写法 #

RxJS 5.5引入了可管道（pipeable）的操作符，of可以作为独立函数导入，路径为rxjs/observable/of：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { of } from 'rxjs/observable/of'; // 直接导入of独立函数
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
  constructor() { }

  getHeroes() : Observable<Hero[]> {
    return of(HEROES); // 这里可以直接调用of()
  }
}

为什么之前的尝试失败？ #

• import { Observable, of } from 'rxjs';：这是RxJS 6的统一导入方式，RxJS 5.5并未把of导出在根模块中，所以会提示找不到成员
• import { Observable, of } from 'rxjs/Observable';：rxjs/Observable模块仅导出Observable类本身，of是需要额外导入的扩展方法，因此这里也无法找到该成员

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