0

I am trying to write an onmousemove handler in vue 3 using typescript. The handler itself works as intended, however I am having trouble to get the typing correct.

Here the handler function:

import { Ref } from "vue";

export const handleMousemove =
  (x: Ref<number>, y: Ref<number>) => (event: MouseEvent) => {
    const { clientHeight, clientWidth } = event.currentTarget;
    //      ^^^^^^^^^^^^  ^^^^^^^^^^^
    const { offsetX, offsetY } = event;

    x.value = (offsetX * 100) / clientWidth;
    y.value = (offsetY * 100) / clientHeight;
  };

strangely clientHeight and clientWidth are marked red, i.e. those properties should not exist on event.currentTarget. When I check in the debugger everything looks good and those properties exist.

For me the best way currently to deal with the error is to use type assertion:

const { clientHeight, clientWidth } = event.currentTarget as HTMLElement;

I would be very happy if someone can explain me where this seemingly inconsistency comes from. Thanks.

Nikodem Bienia
  • 88
  • 2
  • 9
  • [Why is Event.target not Element in Typescript?](https://stackoverflow.com/q/28900077/381282) - the question is about `target` property but it applies equally to `currentTarget` – Michal Levý Mar 25 '22 at 21:09
  • Thanks for the refenrence, that actually answers my question :-) . – Nikodem Bienia Mar 25 '22 at 21:31

0 Answers0