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
– Armen Vardanyan, Commented Dec 1, 2017 at 14:52
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
– Chris Tarasovs, Commented Dec 1, 2017 at 15:00
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
– Armen Vardanyan, Commented Dec 1, 2017 at 15:02
I agree @ArmenVardanyan to what you saying, but I refactor a big app and don't want to change everything at once. :) — Chris Tarasovs
– Chris Tarasovs, Commented Dec 4, 2017 at 16:45

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

1

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

answered Dec 1, 2017 at 15:04

Armen Vardanyan

3,3251 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related