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

(VSCode)

当我将事件与 jsx 代码分离时。（在 class Component 中）

像这样⬇

 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.DOMAttributes< HTMLFormElement >onSubmit?:(event: React.FormEvent< HTMLFormElement >)=> void) | undefined "

在此输入图片描述

所以，我们可以直接知道事件对象的类型！(event: React.FormEvent)

✅ 问题是我的代码没有像上面那样宣布。

我的 tsc 说

"React.DOMAttributes< HTMLFormElement >.onSubmit?: React.FormEventHandler< HTMLFormElement > | undefined"

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

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

但我想通过类型推断直接了解事件对象的类型！

📍我如何通过类型推断直接了解事件对象的类型？

答案＃1

你可以把类型分配给函数本身，或者分配给函数的参数，也就是事件。

React.FormEventHandler<HTMLFormElement>

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

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

那么变量 e 的类型将会自动推断为 React.FormEvent<HTMLFormElement>。所以你实际上不需要知道事件的类型，因为你可以将类型应用到函数本身，从而获得正确的类型。

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

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

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

答案＃2

提前为此道歉，这个答案不是完整的解决方案

我遇到了同样的问题，我搜索了很多，并尝试更改所有关于 typescript.inlayHints 的 settings.json。不幸的是，什么都没用。

所以我去实现 onSubmit

如果你按住命令键（在其他操作系统可能是 Ctrl 键）悬停在 onSubmit 上，你可以进入 index.d.ts 然后你就可以看到

        onSubmit?: FormEventHandler<T> | undefined;

所以我把它改成了

        onSubmit?: (event: FormEvent<T>) => void | undefined;

现在我可以得到你想要的了

我认为，node_modules/@types/react/index.d.ts 的新版本结果像第一张图片一样。

使用 Eventhandler 类型也是一个不错的解决方案，如果你将鼠标悬停在 e 参数上，你可以看到事件对象