Typescript discriminated union types with Rx.js filter operator?

Question

Typescript supports discriminated unions. How to extend the same concept with Rxjs to the filter operator in below example?

interface Square {
    kind: 'square';
    width: number;
}

interface Circle {
    kind: 'circle';
    radius: number;
}

interface Center {
    kind: 'center';
}

type Shape = Square | Circle | Center;

const obs$: Observable<Shape> = of<Shape>({ kind: 'square', width: 10 });

// Expected type: Observable<Square>
// Actual type: Observable<Shape>
const newObs$ = obs$.pipe(
    filter((x) => x.kind === 'square')
);

I above code snippet, I would want to see newObs$ to have its type inferred as: Observable<Square>. But apparently, TypeScript doesn't do that.

How to achieve this? Am I reaching the limits of TypeScript type inference?

I look for this as it seems to be very useful in a Redux + Redux-Observable codebase.

Answer 1

Actually you can do this with TypeScript type guards. See section "Type Guards and Differentiating Types" at http://www.typescriptlang.org/docs/handbook/advanced-types.html

The key here is the function isWhatever(x: any): x is Whatever => ... syntax.

This basically says that if the isWhatever function returns true then it guarantees that x is of Whatever type.

In your example TypeScript considers all three classes:

So you can define the predicate function for filter() as this:

filter((x: Shape): x is Square => x.kind === 'square')

Now it will properly consider only the Square class:

See live demo: https://stackblitz.com/edit/rxjs6-demo-z9lwxe?file=index.ts

Very similar question: https://github.com/ReactiveX/rxjs/issues/2340

Answer 2

This is not necessarily a limitation with the TypeScript type system but rather with the implementation of filter. You can easily achieve the desired behaviour using flatMap:

// Inferred type: Observable<Square>
const newObs$ = obs$.pipe(
  flatMap((x) => x.kind === "square" ? of(x) : empty())
);