React中为SelectBoxGroup添加全选功能时遇类型错误求助

问题 #

我有父组件SelectBoxGroup和子组件SelectBox，想给SelectBoxGroup添加全选选项，但遇到TypeScript错误：

Property 'checked' does not exist on type 'EventTarget | (EventTarget & HTMLInputElement)'. Property 'checked' does not exist on type 'EventTarget'

相关代码：

function SelectBox({
  ...
}: React.HTMLAttributes<HTMLInputElement> & SelectBoxProps) {

  const { register } = useFormContext();
  const { ref, ...rest } = register(name, {
    onChange,
  });

  return (
    <div>
      <input
            type="checkbox"
            checked={isChecked}
            value={value}
            {...props}
            {...rest}
       />
          <label>{label}</label>
    </div>
  );
}
export function SelectBoxGroup({
  ...
}: React.HTMLAttributes<HTMLInputElement> & SelectBoxGroupProps) {
  
  const [checkAllChecked, setCheckAllChecked] = useState(false);

  function handleCheckAll(checked: boolean) {
    setCheckAllChecked(checked);
    onChangeHandler?.( 
      options.map(option => ({
        ...option,
        isChecked: checked,
      }))
    );
  }
  return (
    <div>
      {showCheckAll && (
        <SelectBox
          id={'check-all'}
          isChecked={checkAllChecked}
          onChange={e => handleCheckAll(e.target.checked)} // 错误位置
          label="全选"
          value="全选"
          name={""}
        />
      )}
      <div
        role="group"
      >
        {options?.map((option, index) => (
          <SelectBox
            key={option.value}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              onChangeHandler?.(e);
            }}
            name={name}
            label={option.label}
            value={option.value}
          />
        ))}
      </div>
    </div>
  );
}

错误原因 #

TypeScript无法确定onChange事件中e.target的具体类型：虽然SelectBox的Props继承了HTMLAttributes<HTMLInputElement>，但在未明确标注事件类型的情况下，TS会认为e.target可能是普通EventTarget（没有checked属性），因此抛出类型错误。

解决方法 #

方法1：明确标注事件类型 #

给SelectBox的onChange参数加上React.ChangeEvent<HTMLInputElement>类型：

<SelectBox
  id={'check-all'}
  isChecked={checkAllChecked}
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleCheckAll(e.target.checked)}
  label="全选"
  value="全选"
  name={""}
/>

方法2：类型断言 #

直接断言e.target为HTMLInputElement，告诉TS它的具体类型：

onChange={e => handleCheckAll((e.target as HTMLInputElement).checked)}

方法3：优化组件Props类型（推荐） #

在SelectBoxProps中明确指定onChange的类型，避免后续重复标注：

type SelectBoxProps = {
  // 你的其他属性定义...
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

之后使用SelectBox的onChange时，TS会自动推断事件类型，无需额外标注。

方法4：解构时指定类型 #

解构事件对象的target并直接获取checked，同时标注类型：

onChange={({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) => handleCheckAll(checked)}

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