'Observable<string>' 类型上不存在属性 'first'答案

【问题标题】：Property 'first' does not exist on type 'Observable<string>''Observable<string>' 类型上不存在属性 'first'
【发布时间】：2018-10-31 23:05:41
【问题描述】：

在 Angular 5 中，我想使用 first() 方法，如下所示：

this.ccService.mode.first().subscribe(mode => {
  this.mode = mode;
});

我是这样导入的：import { first } from 'rxjs/operators/first';。我也尝试过从'rxjs/add/operator'、'rxjs/operators'、'rxjs' 导入，似乎都没有。

但是，它拒绝工作，只给我你已经在标题中看到的错误消息：[ts] Property 'first' does not exist on type 'Observable<string>'.。

mode 可观察：

private modeSource = new BehaviorSubject<string>('new');
public mode = this.modeSource.asObservable();

public setMode(mode: string) {
  this.modeSource.next(mode);
}

我一直在谷歌搜索，但我似乎找不到有同样错误的人，我只是没有使用first() 对吗？我应该使用.pipe(first()).subscribe 吗？ https://www.learnrxjs.io/operators/filtering/first.html 断断续续地使用observable.first().subscribe 和observable.pipe(first()).subscribe 没有明确的解释或推理，所以我在这里有点迷失了。

【问题讨论】：

使用 RxJS 5 和“原型”风格的运算符，您需要使用 import 'rxjs/add/operator/first'; 修补 Observable 类
@martin 修复了它，你应该让它成为答案而不是评论

标签： angular typescript rxjs

【解决方案1】：

TL;DR;是的，您应该使用可管道操作符。

自 rxjs v5.5 以来的变化：

之前的链式操作符编码风格已被替换为将一个运算符的结果传递给另一个运算符。可管道化的运营商是在 5.5 版中添加。充分讨论推理和可管道操作符所需的更改，请参阅 RxJS 文档。

这里是why：

用于点链的修补运算符的问题是：

任何导入补丁操作符的库都会增加该库的所有消费者的 Observable.prototype，创建盲目依赖关系。如果图书馆取消了他们的使用，他们在不知不觉中打破其他所有人。使用管道，您必须导入操作符你需要进入你使用它们的每个文件。

直接修补到原型上的操作员不是“可摇树”的通过汇总或 webpack 等工具。可管道化的运营商将像他们一样只是直接从模块中拉入的函数。

无法检测到正在导入应用的未使用运算符可靠地通过任何类型的构建工具或 lint 规则。这意味着您可能会导入扫描，但停止使用它，它仍在添加中到您的输出包。使用管道运算符，如果您不使用它，一个 lint 规则可以为你挑选它。

功能组合很棒。构建您自己的自定义运算符变得非常非常容易，现在它们可以工作并且看起来就像所有来自 rxjs 的其他运算符。您不需要扩展 Observable 或不再覆盖提升。

【讨论】：