TypeScript中如何正确为RxJS Observable标注类型？

问题场景 #

出于学习目的给自定义Observable编写匹配的TypeScript类型时，以下代码出现编译报错，需要确认正确的类型标注写法：

type Color = "white" | "green" | "red" | "blue";
type Logo = "fish" | "dog" | "bird" | "cow";

const color$ = new Subject<Color>();
const logo$ = new Subject<Logo>();

const observabl1:<Subject<Color>, Subject<Logo>> = combineLatest([color$, logo$]);

observabl1.subscribe(([color, logo]) =>
  console.log(`${color} ${logo}`)
);

测试代码片段：

const observable2$:Observable<string> = from(["white", "green", "red", "blue"]);

报错原因 #

• 导入路径错误：最初使用import { Observable } from 'rx';导入类型，rx是已废弃的RxJS旧版本包，类型定义和现行API不匹配。
• 类型标注语法错误：combineLatest的返回值类型标注缺少Observable外层声明，且内部不需要写Subject泛型，combineLatest返回的是合并后发值的流，不是Subject。

修复方案 #

1. 把所有RxJS相关类型、方法的导入路径修改为现行版本的rxjs入口
2. 修正combineLatest返回值的类型标注，或者直接省略类型标注让TS自动推导

修复后完整代码 #

// 统一从rxjs导入所需API和类型
import { Subject, combineLatest, from, Observable } from 'rxjs';

type Color = "white" | "green" | "red" | "blue";
type Logo = "fish" | "dog" | "bird" | "cow";

const color$ = new Subject<Color>();
const logo$ = new Subject<Logo>();

// 正确标注：返回值是发值为[Color, Logo]元组的Observable
const observable1: Observable<[Color, Logo]> = combineLatest([color$, logo$]);

observable1.subscribe(([color, logo]) =>
  console.log(`${color} ${logo}`)
);

// 导入路径正确后该段代码不会报类型错误
const observable2$: Observable<string> = from(["white", "green", "red", "blue"]);

开发提示：绝大多数场景不需要手动标注combineLatest这类操作符的返回类型，TypeScript可以根据传入的参数自动推导出准确的流类型，手动标注反而容易出现语法或类型错误。

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