如何结合TypeScript判别式联合与RxJS的filter操作符？

要让filter操作符之后的Observable类型正确缩小为Square，关键是给TypeScript提供明确的类型守卫——因为默认情况下，TypeScript不会自动把x.kind === 'square'这个条件和Square类型关联起来，需要我们显式告知。

方法1：使用内联类型守卫 #

最直接的方式是在filter的回调函数里定义类型断言（type predicate），直接告诉TypeScript：当回调返回true时，当前值就是Square类型：

import { of, Observable } from 'rxjs';
import { filter } from 'rxjs/operators';

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 });

// 现在newObs$会被正确推断为Observable<Square>
const newObs$ = obs$.pipe(
  filter((x): x is Square => x.kind === 'square')
);

方法2：提取可复用的类型守卫函数 #

如果需要多次判断同一种类型，把类型守卫提取成单独的函数会更复用友好：

// 可复用的类型守卫
const isSquare = (shape: Shape): shape is Square => {
  return shape.kind === 'square';
};

// 使用守卫函数过滤
const newObs$ = obs$.pipe(
  filter(isSquare)
);

为什么默认filter做不到？ #

这不是TypeScript类型推断的极限，而是因为filter的默认类型定义只会保留原类型的“可能子集”，但不会根据判别式自动缩小到具体类型。只有当我们提供x is Square这种类型断言时，TypeScript才能把过滤后的类型精确缩小到目标类型。

这种技巧在Redux + Redux-Observable场景里特别实用：处理action的判别式联合时，用类型守卫过滤特定type的action后，后续的map、switchMap等操作符会自动获得正确的action类型，完全不需要手动类型断言。

内容的提问来源于stack exchange，提问作者Harshal Patil