TypeScript中radio输入框checked属性类型错误的解决方法

你遇到的问题是因为TypeScript默认将document.querySelectorAll("input[type=radio]")的返回值类型推断为NodeList<Element>，而Element类型并不包含checked、defaultValue这类单选框（HTMLInputElement）专属的属性，所以会触发类型错误。以下是几种可行的解决方法：

方法1：给querySelectorAll指定泛型类型 #

直接在调用querySelectorAll时明确元素类型为HTMLInputElement，这样返回的NodeList就会正确推断类型，后续循环里可以直接访问属性：

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

方法2：在循环内使用类型断言 #

如果不想修改querySelectorAll的调用，也可以在循环里把每个元素断言为HTMLInputElement：

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

方法3：使用类型守卫（更安全） #

如果需要确保元素确实是输入框类型（避免DOM结构意外变化导致的错误），可以用类型守卫做校验：

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

内容的提问来源于stack exchange，提问作者xkeshav