时间戳

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

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

问题描述

（VS代码）

当我将事件与 jsx 代码分离时。（在类组件）

喜欢这个⬇</p> 

 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 ”

在此处输入图像描述

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

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

我的 tsc 说

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

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

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

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

我怎样才能直接知道事件对象的类型！通过类型推断？

标签： typescripttypesvscode-settingstype-inferencereact-typescript

解决方案

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

我有同样的问题，我搜索了很多，并尝试更改所有关于 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参数上，你可以看到 Event Object

在此处输入图像描述

推荐阅读