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

【问题标题】：At. React + TypeScript, How can I Directly know about "event object's type" by type-inference?在。 React + TypeScript，如何通过类型推断直接知道“事件对象的类型”？
【发布时间】：2021-07-01 23:09:11
【问题描述】：

(VSCode)

当我将事件与 jsx 代码分离时。 (at.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.DOMAttributesonSubmit?:(事件： React.FormEvent)=> void) |未定义 "

enter image description here

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

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

我的 tsc 说

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

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

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

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

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

【问题讨论】：

标签： typescript types vscode-settings type-inference react-typescript

【解决方案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。

【讨论】：

虽然这是真的，但它并没有回答为什么 OPs VSCode 工具提示不能像通常在各种答案/教程/视频/等中呈现的那样工作的问题

【解决方案2】：

提前，很抱歉这个答案不是一个完整的解决方案

我有同样的问题，我搜索了很多，并尝试更改所有关于 typescript.inlayHints 的 settings.json。不幸的是，没有任何效果

所以我去执行 onSubmit

如果您使用命令键将鼠标悬停在 onSubmit 上（可能是 ctrl 键另一个操作系统）你可以去 index.d.ts 然后就可以看到了

        onSubmit?: FormEventHandler<T> | undefined;

所以我把它改成了

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

现在我可以得到你想要的

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

使用Eventhandler类型也是一个很好的解决方案，如果你将鼠标悬停在e参数上，你可以看到Event Object

【讨论】：