Override the Subject.next method

Question

I have the following code, in which I wanna override the next to have some custom logic. It doesn't work this way, but only works if the next is a property with an arrow function. What's the reason behind it?

export class Store<T> extends ReplaySubject<T | undefined> {
  next(value?: T) {
    console.log("do something in my code");
    super.next(value);
  }
}

export class Store<T> extends ReplaySubject<T | undefined> {
  next = (value?: T) => {
    console.log("do something in my code");
    super.next(value);
  };
}

https://stackblitz.com/edit/typescript-override-subject-next

Answer 1

Subject (and Observables) takes an Observer object with methods like next:

const observer = {
  next: () => {},
  error: () => {},
  complete: () => {},
};

You can provide this object to the Subject (preferably Observable) instead of extending it:

const subject = new Subject();

const observer = {
  next: (val) => { ... custom logic };
  < ... > 
}

subject.asObservable().subscribe(observer);