javascript - Definiendo elementos HTML en typescript

Estoy tratando de averiguar cuál es la mejor manera de definir elementos HTML en TypeScript. Sigo encontrándome con el siguiente problema.

Si tomo un array de nodos DOM con document.querySelectorAll, entonces el tipo será Element. Pero si establezco el tipo en Element y quiero establecer el atributo style, entonces obtengo el siguiente error

Property 'style' does not exist on type 'Element'.

Pero si establezco el tipo en HTMLElement, entonces recibo el siguiente error

Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'. Type 'Element' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 111 more.

Aquí hay un ejemplo de código muy simple:

type El = HTMLElement

const boxes = document.querySelectorAll('.box')

const setStyle = (el: El) => {
  el.style.background = 'green'
}

boxes.forEach(box => {
  setStyle(box)
})

Entonces, ¿cuál es la manera correcta de manejar esto? Podría simplemente hacer algo como:

boxes.forEach(box => {
  setStyle(box as HTMLElement)
})

pero parece contraproducente hacer esto constantemente.

Respuesta #1

El paquete typed-query-selector puede inferir el tipo correcto en bastantes casos. Aunque la consulta '.box' no contendrá suficiente información, usar 'div.box', por ejemplo, hará que el código a continuación verifique el tipo sin necesitar afirmaciones:

import 'typed-query-selector'

type El = HTMLElement

const boxes = document.querySelectorAll('div.box')
// type: NodeListOf<HTMLDivElement>

const setStyle = (el: El) => {
  el.style.background = 'green'
}

boxes.forEach(box => {
  setStyle(box)
})

Área de juego de TypeScript

Respuesta #2

Necesitarías verter las cajas de la siguiente manera:

const boxes = document.querySelectorAll('.box') as NodeListOf<HTMLElement>

De esta manera, los elementos de boxes serían considerados como HTMLElement, solucionando el problema.