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 的类型并返回。

效果:

相关推荐
满分观察网友z7 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z9 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog10 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构15 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙22 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1123 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆27 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er32 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0635 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444037 分钟前
javaweb———html
前端·javascript·html