Estoy tratando de averiguar cuál es la mejor manera de definir elementos HTML en mecanografiado. Sigo encontrándome con el siguiente problema.
Si tomo una matriz de nodos dom con document.querySelectorAll , entonces el tipo será Element . Pero si configuro el tipo en Element y quiero configurar el atributo de estilo, obtengo el siguiente error
Property 'style' does not exist on type 'Element'.
Pero si configuro el tipo en HTMLElement , aparece 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 código de ejemplo 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 forma correcta de manejar esto? Podría hacer algo como:
boxes.forEach(box => { setStyle(box as HTMLElement) })pero parece contraproducente hacer esto constantemente.
Necesitarías lanzar las cajas de la siguiente manera:
const boxes = document.querySelectorAll('.box') as NodeListOf<HTMLElement> De esta forma, los elementos de las boxes se considerarían como HTMLElement , solucionando el problema.
Ampliando la respuesta de Ashok. Escriba una función que devolverá sus elementos. p.ej
const getElements = (selector: string) => { return document.querySelectorAll(selector) as NodeListOf<HTMLElement>; }El paquete typed-query-selector puede inferir el tipo correcto en bastantes casos. Aunque la consulta '.box' no contendrá suficiente información, el uso 'div.box' por ejemplo, hará que el código siguiente verifique el tipo sin aserciones:
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) })