React. Тип event-а для получения closest dataset-а

Question

Есть функция, обработчик клика по элементу:

function toggleSelect(e: React.MouseEvent<HTMLDivElement>) {
  const id = e.target?.closest('[data-id]')?.dataset?.id
    
  if (id) {
    selected === id 
      ? setSelected(null) 
      : setSelected(id)
  }
}

Но typescript ругается на closest:
TS2339: Property 'closest' does not exist on type 'EventTarget'

Если поменять немного код:

const id = (e.target as Element)?.closest('[data-id]')?.dataset?.id

typescript ругается на dataset
TS2339: Property 'dataset' does not exist on type 'Element'

Какой тип нужно присвоить event-у, чтобы не было ошибок?
(кроме any конечно)

Answer 1

Всё дело в том что closest возвращает тип Element, потому у него и нет dataset.

Вам вместо:

(e.target as Element)?.closest('[data-id]')?.dataset?.id

надо написать:

((e.target as Element)?.closest('[data-id]') as HTMLElement)?.dataset?.id

Answer 2

Тип для аргумента так и не нашёл, но решил задачу по ответу @EzioMercer написав хелпер

import { MouseEvent } from 'react'

function getTargetDataValue(
  e: MouseEvent<HTMLDivElement>,
  key: string
): string | undefined {
  const selector = `[data-${key}]`
  return ((e.target as Element)?.closest(selector) as HTMLElement)?.dataset[key]
}

export { getTargetDataValue }

Теперь код обработчика выглядит так:

function toggleSelect(e: React.MouseEvent<HTMLDivElement>) {
  const id = getTargetDataValue(e, 'id')
    
  if (id) {
    selected === id 
      ? setSelected(null) 
      : setSelected(id)
  }
}

БЛОГ НА HUSL

React. Тип event-а для получения closest dataset-а

Ответы (2 шт):