RxJs custom operator with function as input

Question

Im trying to create to create a custom rxjs operator. I've already created a few custom operator (e.g. MonoTypeOperatorFunction or just regular Observable, that can take in input as a string, number etc.) and they work fine. My problem is that i want to create an operator that takes in a anonymous function. Like x => x.prop or a predicate.

In this example i want to create an operator that can flatten the elements in an object.

interface B {
  bid: number;
}

interface A {
  aid: number;
  bs: B[];
}

const b1: B = { bid: 1 };
const b2: B = { bid: 2 };

const a1: A = { aid: 1, bs: [b1, b2] };

const a1$ = of(a1);

// I want to combine map and concatMap into a single operator
const result = a1$.pipe(
  map(x => x.bs),
  concatMap(x => x)
).subscribe(x => console.log(x))
// OUTPUT: {bid:1}, {bid:2}

// what i want
// a1$.pipe(many(x => x.bs))

// How i tried to create an operator
// function many<T>(predicate: (input: T) => boolean) {
//   return function<T1>(source: Observable<T1>) {
//     return source.pipe(map(predicate),concatMap(x => x));
//   };
// }

What doesn't work in the snippet? It looks good to me, but I might be missing something — Andrei Gătej
– Andrei Gătej, Commented Feb 21, 2021 at 13:50
@AndreiGătej I want to combine map and concatMap into a single operator. In my example, i call it many. I will like to have a generic implementation that works for all objects that have a list property if that makes sense — XRaycat
– XRaycat, Commented Feb 21, 2021 at 15:31
If I uncomment the code it gives me this; Argument of type '(input: any) => T' is not assignable to parameter of type '(value: any, index: number) => ObservableInput<any>'. Type 'T' is not assignable to type 'ObservableInput<any>'. Type 'T' is not assignable to type 'ArrayLike<any>'.(2345) — XRaycat
– XRaycat, Commented Feb 21, 2021 at 15:32
Could you reproduce the error in a StackBlitz app or something similar? It would be easier to find a solution that way. — Andrei Gătej
– Andrei Gătej, Commented Feb 21, 2021 at 15:36

Mrk Sef · Accepted Answer · 2021-02-21 16:38:14Z

1

There's already an operator that combines map and concatMap into a single operator, it's called concatMap.

pipe(map(somefunc), concatMap(x => x)) is always the same as concatMap(somefunc). Which explains why it's called concatMap ;)

Your function:

The function you wrote can be rewritten as follows:

function many<T>(predicate: (input: T) => boolean) {
  return pipe(map(predicate),concatMap(x => x));
}

which is the same as

function many<T>(predicate: (input: T) => boolean) {
  return concatMap(predicate);
}

When you look at this, you should be able to see that you're transforming your stream of type T into a stream of type boolean. concatMap can't subscribe to a boolean. You'll need a function of type (input: T) => Observable<R>. Which is the same type signature that concatMap already takes.

edited Feb 21, 2021 at 16:38

answered Feb 21, 2021 at 15:39

Mrk Sef

8,0721 gold badge14 silver badges25 bronze badges

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

2 Comments

XRaycat Over a year ago

Yes, of course, thank you! But should it not be function many<T>(predicate: (input: T) => T[]) ?

Mrk Sef Over a year ago

Most high-order operators (concatMap, mergeMap, switchMap, defer, concatAll, mergeAll, etc) will subscribe to an array by turning it into a stream for you. So yes, someFunction: (input: T) => R[] will work! :)

Collectives™ on Stack Overflow

RxJs custom operator with function as input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related