3

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

skink
  • 5,133
  • 6
  • 37
  • 58
Jefferson
  • 173
  • 2
  • 12
  • 32

4 Answers4

4

you put your code on the wrong scope, u probably want to do it like this:

 constructor() {
 this.onSentenceChangeDebouncer
            .debounceTime(300)
            .subscribe(() => {
                this.updateConceptDependencies();
                this.compileSentence();
            });
}
gil
  • 2,388
  • 1
  • 21
  • 29
3

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.

skink
  • 5,133
  • 6
  • 37
  • 58
3

EDIT this work with rxjs +6.0

you forgot to pipe the subject! try this:

import { Subject } from "rxjs";

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

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

 constructor(){}

i suggest you to not subscribe in constructor, but prefer the onInit Hook or, like in example, directly in the contest of the component.

in this way you have the reactivness that you need

Dario
  • 364
  • 2
  • 9
2

It looks like your constructor is missing this closing ')' your code should look something like this:

import { Subject } from "rxjs";


class SomeClass {
    onSentenceChangeDebouncer: Subject<void> = new Subject<void>();
    
    constructor() {
        this.onSentenceChangeDebouncer
            .debounceTime(300)
            .subscribe(() => {
            
            
               this.updateConceptDependencies();
               this.compileSentence();
            });

    }

    updateConceptDependencies() { /* some logic */ }
    compileSentence() { /* some logic */ }

}
Derrick Awuah
  • 373
  • 2
  • 5