domtypescript-typings

Property 'checked' does not exist on type 'Element' while variable are NodeList


trying to select all radio input and their checked status using below code

  const radioInput = document.querySelectorAll("input[type=radio]");
  radioInput.forEach((r) => (r.checked = r.defaultValue === 'whatever'));

this is working in javascript but now trying to convert into typsscript and now it

gives below typing error inside forEach()

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

also when we hover on radioInput variable, its display NodeList<Element>

the tsconfig.json have below entry

"lib": [
      "es2022",
      "dom",
      "dom.iterable"
    ],

How can we fix this?

Already checked similar questions, most of answer are React related while my code is written in typescript only (.ts, not .tsx)

Working Demo


Solution

  • To access checked you need to consider element as HTMLInputElement instead of HTMLElement, i.e. (r: HTMLInputElement)

    Here is the example from your demo:

    // Import stylesheets
    import './style.css';
    
    // Write TypeScript code!
    
    const radioInput = document.querySelectorAll('input[type=radio]');
    radioInput.forEach((r: HTMLInputElement) => (r.checked = r.defaultValue === 'X'));
    
    const enum Shape {
      Circle,
      Square,
    }
    
    console.log(Shape['1']);