Typescript error TS2322: Type 'Observable<boolean | {}> - Angular 5 & Typescript 2.4.2

Question

Trying to understand why I get loads of typescript TS2322 errors when I migrated from 4 to 5. I've installed a new ng project using angular cli

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

Package JSON is as standard, here is a snippet.

"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"

Here is my component that I am testing:

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);
  }
}

My IDE highlights this.show_dropdown$ with an error saying that:

error TS2322: Type 'Observable' is not assignable to type 'Observable'. Type 'boolean | {}' is not assignable to type 'boolean'. Type '{}' is not assignable to type 'boolean'.

Any suggestion about the new typescript 2.4.2 or 2.6?

But why use Observable listeners instead of just (click)=method($event), especially if the implementation is using Observables all the same? — Armen Vardanyan
there can be several reasons. Would take too much time to explain in this little comment box. But when you got big apps with filters etc, you will start to love RXJS and use it — Chris Tarasovs
I love Rx and I work with big apps with loads of data. Having to violate the principles of the framework in use for the sake of anything is bad design. But anyway, I probably got an answer for you — Armen Vardanyan
I agree @ArmenVardanyan to what you saying, but I refactor a big app and don't want to change everything at once. :) — Chris Tarasovs

Armen Vardanyan Armen Vardanyan · Accepted Answer · 2017-12-01T15:04:53

It seems there is a problem with the typing of the scan operator, you see, if you explore the source, it is actually of type <T, R>, where R is the type of the default value. But when you merge the observables in your example, you get a valid Observable<boolean>, so, you can just type cast it to suppress the error:

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

This is valid and should remove the problems

Typescript error TS2322: Type 'Observable<boolean | {}> - Angular 5 & Typescript 2.4.2

1 Answers