RxJS filter过滤后仍报Object is possibly 'undefined'错误求助

问题核心在于：TypeScript无法自动识别RxJS filter 里的普通布尔判断属于类型守卫，即便你已经过滤掉了values为undefined的情况，TS还是会默认保留原类型的可选属性约束。

下面是两种直接有效的解决方式：

1. 用类型守卫函数明确类型 #

写一个专门的类型守卫函数，告诉TypeScript：经过这个函数过滤的对象，一定包含values属性：

interface OptionalObject {
  values?: number[]
}

const obs$$ = new BehaviorSubject<OptionalObject>({});

// 类型守卫函数，断言对象具备非undefined的values属性
function hasValidValues(obj: OptionalObject): obj is OptionalObject & { values: number[] } {
  return !!obj.values;
}

obs$$.pipe(
  filter(hasValidValues), // 传入类型守卫
  map((val) => val.values.length) // 无类型报错
).subscribe(() => {

});

2. 在filter回调内直接做类型断言 #

不需要额外定义函数，直接在filter的返回值位置添加类型断言，一步完成过滤+类型约束：

interface OptionalObject {
  values?: number[]
}

const obs$$ = new BehaviorSubject<OptionalObject>({});
obs$$.pipe(
  // 直接断言过滤后的对象包含非undefined的values属性
  filter((val): val is OptionalObject & { values: number[] } => !!val.values),
  map((val) => val.values.length) // 无类型报错
).subscribe(() => {

});

这两种方式都是通过显式的类型声明，让TypeScript明确知道经过filter后的流中，values属性一定存在，从而消除类型错误。

内容的提问来源于stack exchange，提问作者Felix Riemer