React&TS合并表单元素处理函数遇类型错误，如何解决？

问题描述 #

我尝试在handleChange方法中整合复选框与其他输入/选择元素的处理逻辑，代码如下：

handleChange = (
    event:
      | ChangeEvent<HTMLTextAreaElement>
      | ChangeEvent<HTMLInputElement>
      | ChangeEvent<HTMLSelectElement>
  ) => {
    this.setState({
      [event.target.name]:
        event.target.type == "checkbox"?
          event.target.checked:event.target.value,
    } as unknown as Pick<IFormState, keyof IFormState>);
  };

但遇到如下类型错误：

Property 'checked' does not exist on type '(EventTarget & HTMLTextAreaElement) | (EventTarget & HTMLInputElement) | (EventTarget & HTMLSelectElement)'. Property 'checked' does not exist on type 'EventTarget & HTMLTextAreaElement'.ts(2339)

疑问点：

• 为何类型会是EventTarget与HTMLTextAreaElement这类的组合类型？
• 能否在同一个handleChange方法中解决该问题？

目前使用单独的复选框处理函数可正常运行：

handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
    this.setState({
      [event.target.name]: event.target.checked,
    } as unknown as Pick<IFormState, keyof IFormState>);
  };

问题解答 #

1. 组合类型的成因 #

TypeScript中，ChangeEvent<T>的target属性类型为EventTarget & T——这是因为DOM事件的原生target属性类型是EventTarget，TypeScript通过交叉类型既保留了通用事件目标的属性，也保留了具体元素（如HTMLInputElement）的专属属性。

当你用联合类型（|）将多种ChangeEvent合并后，TypeScript会取所有target类型的交集作为推断结果。由于HTMLTextAreaElement和HTMLSelectElement都没有checked属性，当你直接访问event.target.checked时，TypeScript无法确保当前event.target是具备该属性的HTMLInputElement，因此抛出类型错误。

2. 同一方法内的解决方案 #

需要通过类型守卫让TypeScript明确判断event.target的具体类型，从而安全访问checked属性。以下是两种可行写法：

写法一：分支判断配合类型推断

handleChange = (
    event:
      | ChangeEvent<HTMLTextAreaElement>
      | ChangeEvent<HTMLInputElement>
      | ChangeEvent<HTMLSelectElement>
  ) => {
    const target = event.target;
    const value = target.type === "checkbox" 
      ? target.checked 
      : target.value;

    this.setState({
      [target.name]: value,
    } as unknown as Pick<IFormState, keyof IFormState>);
  };

当判断target.type === "checkbox"时，TypeScript会自动推断此时的target为HTMLInputElement，允许访问checked属性。

写法二：类型断言配合条件判断

handleChange = (
    event:
      | ChangeEvent<HTMLTextAreaElement>
      | ChangeEvent<HTMLInputElement>
      | ChangeEvent<HTMLSelectElement>
  ) => {
    this.setState({
      [event.target.name]:
        event.target.type === "checkbox"
          ? (event.target as HTMLInputElement).checked
          : event.target.value,
    } as unknown as Pick<IFormState, keyof IFormState>);
  };

通过(event.target as HTMLInputElement)强制类型断言，配合条件判断让TypeScript确认当前场景下target具备checked属性，消除类型错误。

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