javascript - Egenskapen 'focus' eksisterer ikke på 'Element'?

Oppretter et tastaturnavigasjon, og møter følgende problem:

let currentActive = document.activeElement;
if (e.key === "ArrowLeft") {
  currentActive.previousElementSibling.focus();
}

Koden fungerer som forventet, men TypeScript klager på at Property 'focus' does not exist on 'Element' - currentActive er et <img />-element.

Jeg har prøvd å tilordne currentActive til å være et HTMLElement, ved å gjøre dette: let currentActive=document.activeElement as HTMLCollectionOf<HTMLElement>, men det ser ikke ut til å like det.

Hva går jeg glipp av?

Svar #1

Jeg ville foreslå å prøve noe som dette:

let currentActive = document.activeElement;
if (e.key === "ArrowLeft") {
  (currentActive.previousElementSibling as HTMLElement)?.focus();
}

Merk at valgfri kjeding har vært tilgjengelig siden TypeScript 3.7

Svar #2

Jeg hadde det samme problemet, og jeg løste det ved å definere typen av elementet jeg forventet fra queryselector. I mitt tilfelle forventet jeg et input-element, så jeg gjorde:

document.querySelector<HTMLInputElement>(`input[name=${element-name}]`)?.focus()

Svar #3

Du må overbevise TS om at currentActive.previousElementSibling er av typen HTMLElement.

Som et bonustips vil jeg anbefale å overbevise deg selv om å unngå noen røde kryss i konsollen din. Kanskje noe i retning av currentActive?.previousElementSibling?.focus?.();

Svar #4

Bruk as for å fortelle TS at det er et HTMLElement:

(currentActive.previousElementSibling as HTMLElement).focus();

Relaterte artikler