带有RxJS过滤器打字问题的打字稿

Question

I've just upgraded from typescript 2.4 to 3.2 and now with the unknown type, the type system is stricter which trigger some errors that I didn't have before.

So I have an effect that retreive some possibly null data from the store and I want to make sure its not null by using a filter before dispatching my next action.

@Effect() saveSuccess$: Observable<Action> = this.actions$.pipe(
        ofType(actions.SAVE_SUCCESS),
        switchMapTo(this.store.pipe(select(selectors.getId))),
        filter((id: number | null) => id !== null),
        map((id: number) => new actions.GetData({ Id }))
);

The filter is now red saying:

    Argument of type 'MonoTypeOperatorFunction<number | null>' is not assignable to parameter of type 'OperatorFunction<number | null, number>'.
  Type 'Observable<number | null>' is not assignable to type 'Observable<number>'.
    Type 'number | null' is not assignable to type 'number'.
      Type 'null' is not assignable to type 'number'.ts(2345)

I can bypass the error by using any type but I feel like I shouldn't. If I change the map to accept number | null number | null it works but it makes no sens since its exactly the filter's job.

Answer 1

Try turning your filter function into a type guard by adding the return type id is number . I know this works when filtering arrays, and while i havn't tested it with observables i expect it would work there too (because they define filter with this type definition ):

this.actions$.pipe(
  ofType(DCFActions.SAVE_SUCCESS),
  switchMapTo(this.store.pipe(select(selectors.getId))),
  filter((id: number | null): id is number => id !== null),
  map((id: number) => new actions.GetData({ Id }))
);

If you wanted to make a more general filter function to filter out nulls from more things than just numbers, then you could write that like this:

const notNull = <T>(value: T | null): value is T => value !== null;

// ... to be used like:
filter(notNull);

You can read more about user-defined type guards here: https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards