The 'this' context of type 'Subject<void>' is not assignable to method's 'this' of type 'Observable<void>'

Issue

I am importing Subject from rxjs and then creating a property onSentenceChangeDebouncer. In the constructor I am using this so I am not sure why I am getting the error "is not assignable to method". It looks like it is related to the line with debounceTime(300).

Error   TS2684  The 'this' context of type 'Subject<void>' is not assignable to method's 'this' of type 'Observable<void>'.
  The types returned by 'lift(...)' are incompatible between these types.
    Type 'Observable<void>' is not assignable to type 'Observable<R>'.
      Type 'void' is not assignable to type 'R'.
        'R' could be instantiated with an arbitrary type which could be unrelated to 'void'.

import { Subject } from "rxjs";

onSentenceChangeDebouncer: Subject<void> = new Subject<void>();

constructor(
  this.onSentenceChangeDebouncer
    .debounceTime(300)
    .subscribe(() => {
      this.updateConceptDependencies();
      this.compileSentence();
    });
}

StackBlitz

Solution

I think the problem is that you subscribe to the Subject<T> instead of Observable<T>. The corrected code should be:

onSentenceChange$: Observable<void> = this.onSentenceChangeDebouncer.asObservable();

this.onSentenceChange$.debounceTime(300).subscribe(() => { ... });

As it turns out, the error happens due to the fact that the Subject<T>.lift signature was broken in the package until v5.4.2, so it's also possible to get rid of it by updating rxjs to that version.

Answered By - Joulukuusi