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

效果:

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫4 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css