MouseMoveEvent：鼠标事件

Question

我不太擅长 Javascript，所以 Typescript 对我来说是一个更大的困难。

我正在尝试借用此代码，以便我可以在 Angular 应用程序中实现事件日历。

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

    const daysDiff =
      floorToNearest(
        mouseMoveEvent.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 of 2，“(observerOrNext?: Partial | ((value: Event) => void) | undefined): Subscription”，出现以下错误。 '(mouseMoveEvent: MouseEvent) => void' 类型的参数不可分配给 'Partial | 类型的参数((值：事件) => void) |不明确的'。 类型“(mouseMoveEvent: MouseEvent) => void”不可分配给类型“(value: Event) => void”。 参数“mouseMoveEvent”和“value”的类型不兼容。 “Event”类型缺少“MouseEvent”类型中的以下属性：altKey、button、buttons、clientX 等 23 个属性。 重载 2 of 2, '(next?: ((value: Event) => void) | null | 未定义，错误？: ((error: any) => void) | null | 未定义，完整？: (() = > void) | null | undefined): 订阅'，出现以下错误。 类型“(mouseMoveEvent: MouseEvent) => void”的参数不可分配给类型“(value: Event) => void”的参数。 参数“mouseMoveEvent”和“value”的类型不兼容。 类型“Event”不可分配给类型“MouseEvent”

我“有点”明白类型不匹配，但我不知道如何更改代码以使其起作用。

这是我试图借用代码的网站

https://www.bacancytechnology.com/blog/implement-angular-calendar-component

打字技巧比我好得多的人可以帮忙吗？

Answer 1

只需将

MouseEvent

替换为

Event

，因为这是最终订阅时收到的类型！

类型“(mouseMoveEvent: MouseEvent) => void”不可分配给类型“(value: Event) => void”

.subscribe((mouseMoveEvent: Event) => { // <- changed here!
    const minutesDiff = ceilToNearest(
      mouseMoveEvent.clientY - segmentPosition.top,
      30
    );

    const daysDiff =
      floorToNearest(
        mouseMoveEvent.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();
  });