angular - EventoMovimientoDelMouse: EventoDelMouse

No soy muy bueno en Javascript, así que TypeScript es aún más difícil para mí.

Estoy tratando de tomar prestado este código para poder implementar un calendario de eventos en una aplicación 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();
  });

Obtengo esto como un error:

Sobrecarga 1 de 2, '(observerOrNext?: Partial | ((value: Event) => void) | undefined): Subscription', dio el siguiente error. El argumento de tipo '(mouseMoveEvent: MouseEvent) => void' no es asignable al parámetro de tipo 'Partial | ((value: Event) => void) | undefined'. El tipo '(mouseMoveEvent: MouseEvent) => void' no es asignable al tipo '(value: Event) => void'. Los tipos de parámetros 'mouseMoveEvent' y 'value' son incompatibles. Al tipo 'Event' le faltan las siguientes propiedades del tipo 'MouseEvent': altKey, button, buttons, clientX, y 23 más. La sobrecarga 2 de 2, '(next?: ((value: Event) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription', dio el siguiente error. Argumento de tipo '(mouseMoveEvent: MouseEvent) => void' no es asignable al parámetro de tipo '(value: Event) => void'. Los tipos de los parámetros 'mouseMoveEvent' y 'value' son incompatibles. El tipo 'Event' no es asignable al tipo 'MouseEvent'

Yo "más o menos" entiendo que los tipos no coinciden, pero no sé cómo cambiar el código para que funcione.

Aquí está el sitio del que estoy tratando de tomar prestado el código

https://www.bacancytechnology.com/blog/implementar-componente-calendario-angular

¿Alguien con habilidades de TypeScript mucho mejores que las mías puede ayudar, por favor?

Respuesta #1

¡Simplemente reemplaza MouseEvent con Event, ya que ese es el tipo que se recibe en la suscripción final!

El tipo '(mouseMoveEvent: MouseEvent) => void' no se puede asignar al tipo '(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();
  });