使用TypeScript调用reset()函数出现类型错误的解决咨询

方法1：指定更精确的事件类型 #

直接给事件参数e指定React.FormEvent<HTMLFormElement>类型，TypeScript会自动推断e.target为HTML表单元素，自然支持reset()方法：

const handleSchedule = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  emailjs.sendForm('Private', 'Private', formRef.current, 'Private')
    .then((result) => {
      console.log(result.text);
    }, (error) => {
      console.log(error.text);
    });
  e.target.reset() // 此处不再报错
}

方法2：类型断言（适用于确定目标是表单的场景） #

如果无法修改事件参数类型，可通过类型断言将e.target转为HTMLFormElement：

const handleSchedule = (e: React.FormEvent) => {
  e.preventDefault()
  emailjs.sendForm('Private', 'Private', formRef.current, 'Private')
    .then((result) => {
      console.log(result.text);
    }, (error) => {
      console.log(error.text);
    });
  (e.target as HTMLFormElement).reset()
}

方法3：类型检查（更安全的方式） #

先验证目标元素确实是HTML表单元素，再调用reset()，避免类型断言可能带来的风险：

const handleSchedule = (e: React.FormEvent) => {
  e.preventDefault()
  emailjs.sendForm('Private', 'Private', formRef.current, 'Private')
    .then((result) => {
      console.log(result.text);
    }, (error) => {
      console.log(error.text);
    });
  
  const target = e.target as EventTarget;
  if (target instanceof HTMLFormElement) {
    target.reset();
  }
}

以上三种方式均符合TypeScript类型安全原则，避免了使用any的不良实践。

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