(Just a heads up, this scenario is within an Angular 5 app, but not specific to Angular itself)
I find myself using a set of operators repetitively in different parts of my code. To minimize redundancy, I grouped them in a base class:
export class ComponentBase {
protected unSubscriber$: Subject<any> = new Subject();
protected endWhenDestroyed = takeUntil(this.unSubscriber$);
protected filterOutNulls = filter(x => notNullOrUndefined(x));
ngOnDestroy() {
this.unSubscriber$.next();
this.unSubscriber$.complete();
}
...
Subsequently, other components inherit from the aforementioned class and leverage these operators:
class SomeClass extends ComponentBase {
...
someObservable$
.pipe(this.filterOutNulls, this.endWhenDestroyed)
.subscribe((y) => ...) // TypeScript loses type of `y` here
...
If I use the operators directly like
class SomeClass extends ComponentBase {
...
someObservable$
.pipe(filter(x => !!x), takeUntil(this.unSubscriber$))
.subscribe((y) => ...)
...
then, TypeScript correctly infers the type of y (in the subscribe) from the source observable. But when utilizing my pre-defined operators, the type inference is lost, requiring me to specify
.subscribe((y: WhatEverType) => ...The following snippet addresses this issue...
const getOp = <T>(): MonoTypeOperatorFunction<T> => {
return filter(x => !!x);
};
...
someObservable$
.pipe(getOp<TheType>())
.subscribe((y) => ...)
Yet, my query pertains to whether there exists a method for maintaining type consistency while using cached operator functions, akin to inline declarations without necessitating manual type casting in both the subscriber and the stored operator as demonstrated above.
In any case, I am open to hearing about any elegant alternative approaches to tackle this challenge.
Thank you in advance