打字稿错误 TS2322：类型 'Observable<boolean | {}> - Angular 5 和 Typescript 2.4.2答案

【问题标题】：Typescript error TS2322: Type 'Observable<boolean | {}> - Angular 5 & Typescript 2.4.2打字稿错误 TS2322：类型 'Observable<boolean | {}> - Angular 5 和 Typescript 2.4.2
【发布时间】：2017-12-01 14:45:15
【问题描述】：

试图了解为什么当我从 4 迁移到 5 时会收到大量打字稿 TS2322 错误。我已经使用 angular cli 安装了一个新的 ng 项目

Angular CLI: 1.5.5
Node: 8.9.1
OS: darwin x64
Angular: 5.0.4

包 JSON 是标准的，这里是一个 sn-p。

"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
"@angular/core": "^5.0.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"

这是我正在测试的组件：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  show_dropdown$: Observable<boolean>;

  @ViewChild('el_dropdown_button') el_dropdown_button: ElementRef;

  constructor() { }

  ngOnInit() {
    // show dropdowng ser
    this.show_dropdown$ = Observable
      .merge(

        // on down arrow click
        Observable
          .fromEvent(this.el_dropdown_button.nativeElement, 'click')
          .scan((value) => !value, false)
          .startWith(false),

        // on input click -> true
        Observable
          .fromEvent(this.el_filter_input.nativeElement, 'click')
          .mapTo(true),
      )
      .startWith(false);
  }
}

我的 IDE 突出显示 this.show_dropdown$ 并显示以下错误：

错误 TS2322：“可观察”类型不可分配给输入“可观察”。输入'布尔| {}' 不可分配给输入“布尔”。类型“{}”不可分配给类型“布尔”。

对新的 typescript 2.4.2 或 2.6 有什么建议吗？

【问题讨论】：

但是为什么要使用 Observable 侦听器而不仅仅是 (click)=method($event)，尤其是在实现都使用 Observables 的情况下？
可能有多种原因。在这个小评论框中解释需要太多时间。但是当你有了带有过滤器等的大型应用程序时，你就会开始喜欢 RXJS 并使用它
我喜欢 Rx，我使用具有大量数据的大型应用程序。为了任何事情而必须违反使用框架的原则是糟糕的设计。但无论如何，我可能已经为你找到了答案
我同意@ArmenVardanyan 的说法，但我重构了一个大型应用程序，不想一次更改所有内容。 :)

标签： angular typescript compiler-errors

【解决方案1】：

看来scan运算符的类型有问题，你看，如果你去探查源码，它实际上是<T, R>类型，其中R是默认值的类型。但是，当您在示例中合并 observables 时，您会得到一个有效的 Observable<boolean>，因此，您只需键入 cast 即可抑制错误：

this.show_dropdown$ = <Observable<boolean>>Observable.merge... //rest of your code

这是有效的，应该可以解决问题

【讨论】：