React+TypeScript中的事件类型

本文参考了 Matt Pocock 的文章 Event Types in React and TypeScript ,有条件的可以阅读英文原版。

一、前言

用 React 和 TypeScript 开发时,会经常碰到这个报错:

当我们给不同的 DOM 元素添加事件处理函数时,onChange 中参数 e 接收到的事件类型是不同的,我们必须为e 指定正确的类型。

二、解决方案

1. 鼠标悬浮

我们把鼠标悬浮在 onChange 上,IDE 会给出相应的类型,直接复制,再将类型添加给声明的事件处理函数:
我们需要的是 ?: 后面的这部分代码。

2. 内联函数

当我们只想为 e 添加类型时,首先要知道 e 的类型是什么。

创建一个内联事件处理函数,将鼠标悬浮在参数 e 上,IDE 会给出正确的类型,选中并复制:

然后添加到我们的处理函数中:

3. 使用 React.ComponentProps

React.ComponentProps 是一个类型工具,用于获取组件或元素的类型。

4. EventFor 工具类型

第三种方案非常方便,但是如果我们只是想给 e 添加类型,有没有更优雅的写法呢?

我们可以用 TypeScript 内置的工具类型 ParametersNonNullable 以及索引访问来实现:

解释一下上面的代码:

  • React.ComponentProps<'input'>['onChange'] 在第三种方案中用过,但是这个类型包含 undefined ,需要使用 NonNullable 把它去掉;
  • NonNullable 用于去除某个类型中的 nullundefined
  • Parameters 用于获取某个函数的所有参数类型,返回一个类型数组,再使用 [0] 取出第一个参数的类型。

如此一来,我们就拿到了参数 e 的正确类型。

但是,上面这种写法有点冗杂,我们可以再进一步,封装一个工具类型:

typescript 复制代码
type GetEventHandlers<
  T extends keyof JSX.IntrinsicElements,
> = Extract<keyof JSX.IntrinsicElements[T], `on${string}`>

type EventFor<
  TElement extends keyof JSX.IntrinsicElements,
  THandler extends GetEventHandlers<TElement>,
> = JSX.IntrinsicElements[TElement][THandler] extends
  | (((e: infer TEvent) => any) | undefined)
  ? TEvent
  : never

上面这段代码需要一些类型体操的知识,这里只解释大概原理:

  • JSX.IntrinsicElements 是一个 interface ,其中声明了所有 HTML 元素的类型;

  • GetEventHandlers 接收一个元素类型,通过 Extract 提取该元素所有 onXxxx 形式的属性,也就是所有的事件:

  • EventFor 接收两个泛型,分别代表元素类型和事件名称,根据这两个泛型从 JSX.IntrinsicElements 中取出对应事件的处理函数的类型声明,然后通过 extends 以及 infer 关键字推断参数 e 的类型并返回。

效果:

相关推荐
yanlele1 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子1 小时前
React状态管理最佳实践
前端
烛阴1 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子1 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码2 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw52 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !2 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt2 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜3 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构