一招鲜尝遍天，react中的ts类型

总览

很多小伙伴对于在react中使用TS不是那么熟悉，本文将讲述如何通过TS声明hook、函数式组件，以及DOM事件参数类型

Hook篇

useState

useState如果传递了初始值，ts会进行类型推导，就像下面这样 我们先初始化一个二级对象

然后鼠标hover查看类型

• 可以看到ts已经将user这个变量的类型推导出来了
• 但是这种写法是有初始值的时候，比如用useState接受一个后端返回的数据结构呢，总不能每次都按后端数据结构去初始化吧
• 这个时候就需要通过泛型指定useState响应式变量的类型，举个🌰

因为没有传递初始值，所以info最终的类型会是一个与undefined组成的联合类型

useRef

useRef除了用于存储一些不引发页面更新的变量，更常用于获取DOM实例，如果只是通过泛型声明一个DOM元素类型，像这样

这样写会出现类型报错，为什么呢，我们查看一下类型定义
useRef定义

其实useRef就是返回了一个带有current属性的对象，然后这个current属性的类型是一个泛型与undefined的联合类型
dom的ref属性定义
顺着类型声明查看，如果我们传递给ref的不是一个函数，那么ref最终的类型定义如下

• 其实也是声明了一个带有current属性的对象，但是是范型与null的联合类型，小伙伴是不是已经猜出问题的根源了
• 没错，我们通过useRef声明的domRef不能兼容这个null类型，所以会出现报错，那么在正确的写法应该是酱紫

useCallback useMemo

这两个hook不需要通过泛型声明函数类型，会自动进行类型推导和useState类似，举个🌰

useReducer

useReducer稍微复杂一点，需要手动声明类型，一般useReducer都是结合react暴露的Reducer类型使用的，举个🌰

• 这里我们向useReducer传递react中的Reducer类型，并接受两个参数
• 第一个参数用于声明useReducer回调函数第一个参数的类型
• 第二个参数用于声明回调函数的第二个参数类型
• 其实Reducer本质上就是帮你声明了一个函数，然后返回值和回调函数的第一个参数相同，宛如redux

createContext

createContext又有一点点不一样，必须要手动声明一个初始值

被useContext消费时，可以自动推导类型

组件篇

函数组件声明

react中的函数式组件一般通过FC类型指定props参数类型，举个例子

如果我们声明的组件拥有children属性呢，因为children属性并不耦合在业务props中，每次手动声明并不是很方便，但是react也给大家提供了PropsWithChildren用于解决这个问题，是不是很贴心doge

PropsWithChildren本质上就是将业务props和children属性取了一个交叉类型

forwardRef组件声明

forwardRef声明组件时，注意类型参数的顺序与组件参数的顺序是反的，例如

事件篇

react业务开发中肯定离不开各种DOM事件，下面列举一些常见的DOM事件参数

那这些事件的参数的类型是如何得知的呢，这里带着大家喵一眼React中的事件定义

可以看到React将事件按类别进行类型声明，例如FormEventHandler

本质上就是向EventHandler传递了事件参数的类型，EventHandler声明了一个函数，接收泛型作为函数参数类型

• 那么例如onChange、onSubmit这类的使用了FormEventHandler声明的事件，最终事件参数即为FormEvent类型
• 其余的事件对应的参数都可以用这个方法查看，道理都是类似的

Finally

本文只是列举了一些在React开发中常用的类型声明，其实这些类型声明方法并不需要单独花费精力去记忆，初期可以依葫芦画瓢，先学会如何使用，然后慢慢地尝试去查看对应的类型定义，从会用到知道为什么这么用，量变到质变就需要小伙伴们加油啦！