javascript - 为什么我在 querySelectorAll 上收到错误 TS2339，因为复选框属性 'checked' 不存在

Question

我正在开发 2016 年创建的 reactJS 应用程序，我正在尝试为其添加功能补丁。这些文件的扩展名为 .tsx，应用程序编译器会在呈现之前查找所有 typescript 错误。所以现在我正在尝试在单击主复选框输入时实现选择所有复选框，但就目前而言，当我调用“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 具有已检查的 getter 和 setter 方法，但我在编译时遇到了 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;
});