Question

我正在开发一个于2016年创建的reactJS应用，我正在尝试对其进行功能修补。这些文件的扩展名为.tsx，应用编译器会在呈现之前查找所有打字稿错误。因此，现在我试图在单击主复选框输入时实现所有复选框的选择，但是就目前而言，我在调用“ checkboxElement.checked = true”时遇到TS2339错误。

主复选框

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

从属复选框

<Col lg={1}>
     <input type="checkbox" />
</Col>

选择所有框方法

checkAllBoxes() {
    const allCheckBoxes = document.querySelectorAll("input[type='checkbox']") as NodeListOf<Element>;
    allCheckBoxes.forEach(checkBox => {
       console.log(checkBox);
       if(checkBox && checkBox.checked) checkBox.checked = true;
    });
}

正如我在console.log中看到的那样，checkBox有checked getter and setter method，但是编译时出现TS2339错误。我很难相信我正面临如此基本的功能。

错误：（我在编译窗口中两次记录此错误）

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

我尝试将查询从querySelectorAll更改为具有相应更改的getElementByID和getElementsByClassname。我更喜欢使用querySelectorAll，但没有严格的指导原则。我看过这个github link，他们说他们已经解决了这个问题，但对我来说不起作用。

Answer 1

Typescript无法知道返回的HTML元素是输入（它们确实具有checked属性。

最简单的解决方案是断言querySelectorAll返回HTMLInputElement的列表

const allCheckBoxes = document.querySelectorAll("input[type='checkbox']") as NodeListOf<HTMLInputElement>;
allCheckBoxes.forEach(checkBox => {
  console.log(checkBox);
  if(checkBox && checkBox.checked) checkBox.checked = true;
});

Answer 2

您正在将allCheckBoxes列表强制转换为NodeListOf，但是Element（正确）没有任何选中的属性。

相反，您应该将其强制转换为NodeListOf，这是复选框的正确接口（checked属性仅针对元素定义）

Answer 3

针对循环进行迭代，而不会强制转换为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;
       }
    }
  }
}

为什么我在querySelectorAll上获得复选框属性“ checked”的错误TS2339，所以不存在

3 个答案: