CODEWITHSUNDEEP
typescriptmouseeventvuejs3onmousemove
Nikodem Bienia
Nikodem Bienia

Reputation: 88

MouseEvent's currentTarget doesn't seem to have the same type declaration compared to its actual structure

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.

Upvotes: 0

Views: 38

Answers (0)

Related Questions