Wsrtjtyk

I am working on a reactJS app which was created in 2016 and I am trying to patch functionalities to it. The files are in .tsx extension and app compiler looks for all the typescript errors before rendering. So right now I am trying to implement select all checkboxes on clicking the master checkbox input, but as it stands right now I am getting TS2339 error when I call 'checkboxElement.checked = true'.

Master checkbox

 <input type="checkbox" onChange={this.checkAllBoxes} />

Slave checkboxes

<Col lg={1}>

     <input type="checkbox" />

</Col>

select all boxes method

checkAllBoxes() {

    const allCheckBoxes = document.querySelectorAll("input[type='checkbox']") as NodeListOf<Element>;

    allCheckBoxes.forEach(checkBox => {

       console.log(checkBox);

       if(checkBox && checkBox.checked) checkBox.checked = true;

    });

}

As I can see in my console.log that checkBox has checked getter and setter method but I get the TS2339 error on compilation. It's hard for me to believe that I am facing this issue with such a fundamental functionality.

The ERROR: (I get this error logged twice in my compilation window)

error TS2339: Property 'checked' does not exist on type 'Element'.

I have tried changing the query from querySelectorAll to getElementByID and getElementsByClassname with the respective changes. I will prefer querySelectorAll but no strict guidelines. I have looked at this github link where they say they have solved this issue but it doesn't work for me.

Typescript has no way of knowing the returned HTML Elements are inputs (which do have the checked property.

The simplest solution is to assert that querySelectorAll returns a list of HTMLInputElement

const allCheckBoxes = document.querySelectorAll("input[type='checkbox']") as NodeListOf<HTMLInputElement>;

allCheckBoxes.forEach(checkBox => {

  console.log(checkBox);

  if(checkBox && checkBox.checked) checkBox.checked = true;

});

You are casting the allCheckBoxes list to a NodeListOf, but Element has (correctly) no checked property.

Instead, you should cast it to NodeListOf, which is the proper interface for checkboxes (checked property is defined only for elements)

Iterate as for loop without casting as NodeListOf<Element>.

checkAllBoxes() {

    const allCheckBoxes = document.querySelectorAll("input[type='checkbox']");

    if(allCheckBoxes){

    for(let i = 0; i< allCheckBoxes.length ; i++){

          console.log(allCheckBoxes[i]);

       if(allCheckBoxes[i] && allCheckBoxes[i].checked) {

          allCheckBoxes[i].checked = true;

       }

    }

  }

}