need combination of map and filter operator (choose)

[jmagaram]

Suppose you have a stream of X | null. How do you map every X to Y and exclude the nulls? Like this...

test() {
  let source: Observable<string | null>;
  let result = source.pipe(
    filter((i) => i !== null && i !== undefined),
    map((i) => i!.toUpperCase()) // undesirable ! operator, generates eslint warning
  );
}

TypeScript isn't smart enough to know that after the filter, I'm just left with a stream of string and still thinks I have a stream of string | null. So I have to use the ! operator to force the conversion which generates an eslint error. Annoying! Is there some workaround I don't know about?

In F# there is a choose operator that is a combination of map and filter. If the mapping operation results in None (or undefined for javascript), it is filtered out and otherwise you get the mapped value. I'd love to see this kind of thing as a standard rxjs operator and am surprised it isn't here by default. Seems like a common need. For example, Firebase gives a stream of user identities where null represents a user who isn't logged on and I can't easily map the logged in users only. In F# I use it all the time when working with sequences.

If I had this operator I could do this...

let result = source.pipe(choose((i)=>i?.toUpperCase() ?? undefined));

I'm not familiar with the rxjs operator types, but it would be something like this. If the projection results in undefined then it is filtered out.

declare function choose<T, R>(project: (value: T) => R | undefined): OperatorFunction<T, R>;

[Brooooooklyn]

filterMap ?

[jmagaram]

Does this exist? I thought i saw this one before but couldn't find it in my imports or docs. Also I just learned that Typescript type guards can help with this.

[Brooooooklyn]

No, filterMap doesn't exsited in RxJS for now. I mean, I think filterMap maybe a better name for this requirement.

[jmagaram]

Flatmap could do it - either map to empty or a sequence of 1 but not very intuitive and harder to use.

[jmagaram]

In F# they call it choose. I remember having trouble learning/remembering that.

// An observable operator that applies the chooser to each element and passes
// the result through if it is not null or undefined. Inspired by the useful F#
// 'choose' operators on sequences, lists, and arrays.
export const filterMap = <T, U>(
  chooser: (item: T) => U | undefined | null
): OperatorFunction<T, U> =>
  mergeMap((i) => {
    const r = chooser(i);
    if (r === null || r === undefined) {
      return EMPTY;
    } else {
      return obsFrom([r]);
    }
  });

[josepot]

TypeScript isn't smart enough to know that after the filter

Yes and no... You can help TS, like this:

test() {
  let source: Observable<string | null>;
  let result = source.pipe(
    filter((i): i is string => i !== null),
    map((i) => i.toUpperCase()) // now you no longer need the `!` anymore :slightly_smiling_face: 
  );
}

Also, if you somehow have the guarantee that the source won't emit any empty strings, then in RxJS v7 you will be able to do this:

test() {
  let source: Observable<string | null>;
  let result = source.pipe(
    filter(Boolean),
    map((i) => i.toUpperCase())
  );
}

[backbone87]

function isNotNull<T>(value: T): value is Exclude<T, null> {
  return value !== null;
}

declare const a$: Observable<string | null>;
const b$: Observable<string> = a$.pipe(filter(isNotNull));

[jmagaram]

I see how the type guard causes filter to change the resultant type from x|null to just x. If filter and map are separate operators then first I'd do the map and map some to null, and then use the filter with the type guard to get rid of the nulls. It works. I find it more intuitive to do them together in one operator. Also I don't think that "is not null" type guard isn't built in so I have to write that too.