为什么TypeScript抛出Binding element 'target' implicitly has an 'any' type.ts(7031)错误

方案1：使用React内置的ChangeEvent类型（最推荐） #

这是React + TypeScript 场景下处理输入变更事件的标准写法，直接给事件参数指定完整类型：

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { target } = e;
  setFormValues({
    ...formValues,
    [target.name]: target.value,
  });
};

如果你的事件需要同时兼容input、textarea、select三类表单元素，可以调整泛型：

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
  const { target } = e;
  setFormValues({
    ...formValues,
    [target.name]: target.value,
  });
};

方案2：仅为解构的target参数指定类型 #

如果你不需要用到事件对象的其他属性，也可以直接给解构出的target指定类型：

const handleInputChange = ({ target }: { target: HTMLInputElement }) => {
  setFormValues({
    ...formValues,
    [target.name]: target.value,
  });
};

可选增强：和表单类型绑定做严格校验 #

如果要进一步避免字段名拼写错误，可以提前定义表单的类型，将target.name的类型和表单字段的key做绑定：

// 第一步：定义表单字段类型
type FormValues = {
  username: string;
  email: string;
  password: string;
};

// 第二步：给formValues的状态指定类型
const [formValues, setFormValues] = useState<FormValues>({
  username: '',
  email: '',
  password: ''
});

// 第三步：收窄target的类型，实现严格校验
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target as { name: keyof FormValues; value: string };
  setFormValues({
    ...formValues,
    [name]: value,
  });
};

这样如果你的input标签的name属性写了不属于FormValues定义的字段，TypeScript会直接抛出错误提示，符合类型安全的最佳实践。

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