在 React + TypeScript，如何通过类型推断直接知道“事件对象的类型”？

如何解决在 React + TypeScript，如何通过类型推断直接知道“事件对象的类型”？

(VSCode)

当我从 jsx 代码中分离事件时。 (at.类组件)

喜欢这样⬇

 handleSubmit = e => { ...}


render(){
return (
  <>
    <form onSubmit={this.handelSubmit}>
      <input
        ref={this.onRefInput}
        type='number'
        value={this.state.value}
        onChange={this.onChange}
      />
      <button>입력!</button>
    </form>
  </>
);}

通常是当其他人将光标移到“onSubmit”上时

tsc 说

"React.DOMAttributesonSubmit?:(event: React.FormEvent)=> void) |未定义 "

enter image description here

所以，我们可以直接知道事件对象的类型！ （事件：React.FormEvent）

✅ 问题是我的代码没有如上声明。

我的 tsc 说

" React.DOMAttributes.onSubmit?: React.FormEventHandler |未定义"

所以，我不能直接知道事件对象的类型！

我知道有很多其他方法可以了解事件对象的类型。

但我想直接知道事件对象的类型！通过类型推断。

?我如何直接知道事件对象的类型！通过类型推断？

解决方法

您可以为函数本身或函数的参数（即事件）分配类型。

---

React.FormEventHandler<HTMLFormElement>

这是函数的类型。如果你像这样使用它：

handleSubmit: React.FormEventHandler<HTMLFormElement> = e => {
}

然后变量 e 的类型将被自动推断为 React.FormEvent<HTMLFormElement>。因此您实际上并不需要知道事件类型，因为您可以将类型应用于函数本身并获得正确的类型。

---

或者您可以将类型分配给事件参数 e。

handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
}

现在 handleSubmit 属性的类型被推断为 (e: React.FormEvent<HTMLFormElement>) => void。