RxJS 6中如何为withLatestFrom后的map数组参数添加类型

这个问题我之前也碰到过，确实在RxJS 6之后改用withLatestFrom+map的写法时，数组解构的类型推断容易失效，导致IDE没法给出正确的属性提示。不过有几个简单的办法可以解决这个问题：

方法一：直接给解构数组指定元组类型 #

这是最直接的方式，在解构参数后面明确标注数组元素的类型：

interface TypeA { payload: any; }
interface TypeB { /* 你的TypeB定义 */ }

source$.pipe(
  withLatestFrom(source2$),
  map(([source1, source2]: [TypeA, TypeB]) => ({ payload: source1.payload, source2 }) ),
)

这样TypeScript就能识别出source1是TypeA类型，IDE自然会提示它的.payload属性了。

方法二：定义可复用的元组类型 #

如果这个类型组合在代码里多次用到，建议单独定义一个元组类型，提升代码可维护性：

interface TypeA { payload: any; }
interface TypeB { /* 你的TypeB定义 */ }
type SourcePair = [TypeA, TypeB];

source$.pipe(
  withLatestFrom(source2$),
  map(([source1, source2]: SourcePair) => ({ payload: source1.payload, source2 }) ),
)

方法三：在map内部单独为变量指定类型 #

如果你觉得在解构处加类型不够直观，也可以在map函数内部给变量单独赋值并指定类型：

interface TypeA { payload: any; }
interface TypeB { /* 你的TypeB定义 */ }

source$.pipe(
  withLatestFrom(source2$),
  map((sources) => {
    const source1: TypeA = sources[0];
    const source2: TypeB = sources[1];
    return ({ payload: source1.payload, source2 });
  })
)

另外补充一点：如果你的source$和source2$本身的类型就很明确，理论上RxJS应该能自动推断出解构后的类型。如果还是出现类型丢失，大概率是上游Observable的类型定义不够清晰，这时候手动指定类型就成了必要的补救手段。

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