RxJS fromEvent事件标注为MouseEvent类型时抛出类型不匹配报错

• 开发需求：监听DOM元素上的鼠标点击事件，获取事件对应的clientX/clientY坐标值
• 项目技术栈版本：Angular v12.1.5、RxJS v6.6.0
• 初始实现代码：

const click$ = () =>
fromEvent(document, 'click').pipe(
  map((ev: MouseEvent) => ev.clientX)
)

• 触发的TypeScript报错：

Argument of type 'OperatorFunction<MouseEvent, number>' is not assignable to parameter of type 'OperatorFunction<Event, number>'.
  Type 'Event' is missing the following properties from type 'MouseEvent': altKey, button, buttons, clientX, and 21 more.ts(2345)

• 核心疑问：代码复制自RxJS官方map操作符文档，是否为版本差异导致的报错。

该问题确实由RxJS大版本的类型定义差异导致：

1. RxJS v6.6.0版本的fromEvent没有内置DOM事件名与对应事件类型的映射逻辑，监听document的click事件时，生成的数据流默认被推导为Observable<Event>类型，即流中输出的是通用的Event基类实例。
2. RxJS的操作符会做严格的类型校验，map操作符的入参类型必须和上游数据流的输出类型匹配，直接将map的回调参数标注为MouseEvent（Event的子类），就会触发类型不兼容的报错。
3. RxJS v7及以上版本新增了DOM事件类型的内置推导能力，监听click事件时会自动识别事件类型为MouseEvent，因此官方文档对应版本的示例代码可以直接运行，复制到v6版本环境中就会出现类型错误。

优先使用显式指定fromEvent泛型参数的方案，类型校验最严谨：

const click$ = () =>
// 显式声明fromEvent输出的事件类型为MouseEvent
fromEvent<MouseEvent>(document, 'click').pipe(
  map((ev) => ev.clientX) // TS会自动推导ev为MouseEvent类型，无需额外标注类型
)

如果需要同时获取clientY坐标，直接在map回调中读取对应属性即可，不会触发类型错误。

临时兼容场景下也可以在map回调内做类型断言，但是该写法严谨度低于前者：

const click$ = () =>
fromEvent(document, 'click').pipe(
  map((ev) => (ev as MouseEvent).clientX)
)

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