Defining HTML Elements in typescript

Question

I am trying to figure out what is the best way to define HTML elements in typescript. I keep running into the following issue.

If i grab an array of dom nodes with document.querySelectorAll then the type will be Element. But if I set the type to Element and I want to set the style attribute then I get the following error

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

But if I set the type to HTMLElement then I get the following 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.

Here is a very simple example code:

type El = HTMLElement

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

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

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

So what is the correct way to go about handling this? I could just do something like:

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

but it seems counter productive to constantly do this.

Answer 1

You would need to cast the boxes as follow:

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

This way the elements of boxes would be considered as HTMLElement, fixing the issue.

Answer 2

Expanding on Ashok's answer. Write a function that will return your elements. e.g.

const getElements = (selector: string) => {
    return document.querySelectorAll(selector) as NodeListOf<HTMLElement>; 
}

Answer 3

The typed-query-selector package can infer the correct type in quite a few cases. Though the query '.box' won't contain enough information, using 'div.box' for example will make the code below type check without assertions:

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)
})

TypeScript playground

Answer 4

try its

let boxes =(<HTMLElement>document.querySelectorAll('.box'));