Как правильно задать тип события мыши?

Question

[MishaXXL]

Если задать event: Event, то element.addEventListener работает корректно, но в функции вылетает ошибка

function scroll(event: Event) {
   const pos = event.pageX // Property 'pageY' does not exist on type 'Event'.
}

Если поменять на React.MouseEvent, то ошибка типизации в функции scrollпропадает
function scroll(event: React.MouseEvent) { ... }

Но появляется ошибка в добавлении слушателя element.addEventListener('mousedown', scroll)

No overload matches this call.
  Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event)

Answer 1

[Дмитрий Беляев]

React.MouseEvent - это события реакта, их нельзя передавать в addEventListener, только в ноды реакта.
Event - это наиболее обобщенный тип события.
Вам нужен тип MouseEvent, в нём будет соответствующее свойство.
Ну и сам element должен иметь тип HTMLElement или производные по идее.

Comments

[MishaXXL]

Спасибо, заменил
const tableWrapper = ref.current as Element | null
на

const tableWrapper = ref.current as HTMLElement | null
function scroll(event: MouseEvent) { ... }

и заработало

[Kataev]

MishaXXL, а зачем Вы используете утверждение "as" для содержимого рефа?
При создании рефа через useRef можно и нужно передавать тип, который мы планируем там содержать:
const ref = useRef<HTMLElement | null>(null)

Answer 2

[luxurypluxury]

const divRef = useRef<HTMLDivElement | null>(null);


function scroll(event: MouseEvent<HTMLDivElement>) { ... }