Angular日历组件开发：MouseEvent类型不匹配错误求助

问题原因 #

你订阅的事件流实际发出的是通用Event类型，但回调里声明了更具体的MouseEvent类型，TypeScript因类型不兼容报错——Event不具备MouseEvent特有的clientX、clientY等属性。

修复方案 #

方案1：类型断言（快速修复） #

若你能确定事件一定是鼠标事件，可直接将传入事件断言为MouseEvent：

.subscribe((mouseMoveEvent: Event) => {
  const event = mouseMoveEvent as MouseEvent;
  const minutesDiff = ceilToNearest(
    event.clientY - segmentPosition.top,
    30
  );

  const daysDiff =
    floorToNearest(
      event.clientX - segmentPosition.left,
      segmentPosition.width
    ) / segmentPosition.width;

  const newEnd = addDays(addMinutes(segment.date, minutesDiff), daysDiff);
  if (newEnd > segment.date && newEnd < endOfView) {
    dragToSelectEvent.end = newEnd;
  }
  this.refresh();
});

方案2：类型守卫（更安全） #

先判断事件类型，避免类型断言带来的潜在风险：

.subscribe((event: Event) => {
  if (!(event instanceof MouseEvent)) return;
  
  const minutesDiff = ceilToNearest(
    event.clientY - segmentPosition.top,
    30
  );

  const daysDiff =
    floorToNearest(
      event.clientX - segmentPosition.left,
      segmentPosition.width
    ) / segmentPosition.width;

  const newEnd = addDays(addMinutes(segment.date, minutesDiff), daysDiff);
  if (newEnd > segment.date && newEnd < endOfView) {
    dragToSelectEvent.end = newEnd;
  }
  this.refresh();
});

说明 #

方案1简洁高效，适合明确事件类型的场景；方案2更严谨，能过滤非鼠标事件，避免逻辑异常。

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