不清楚reacthooks的类型声明？来看就对了

见贤思齐

在了解reacthooks的类型之前，有必要先了解一下@types、.d.ts文件的概念及作用。node_modules中的@types是什么？当我们使用第三方npm包的时候，如果这个包不是ts编写，则没有导出类型，这时候如果在ts中导入会报错。比如jquery这时会报错无法找到模块“jquery”的声明文件尝试使用npmi--save-dev@types/jquery(如果存在)，或者添加一个包含declaremodule'jquery';的新声明(.d.ts这里提示找不到jquery的类型定义可以安装@types/jquery或者在d.ts中自定义类型,大多数情况我们应该使用第一种办法,如果这个库没有@types库再使用第二种,可以在https://microsoft.github.io/TypeSearch/中查找一个包是否存在types。types查找规则当我们使用importxxfrom时ts将会默认从./node_modules/@types中获取类型声明，具体查找规则是ts编译器先在当前编译上下文找jquery的定义,找不到则再去./node_modules/@types中查找。在本地模块查找的类型声明作用域是在模块，在@types中的类型声明是全局的。在tsconfig.json中也可以使用typeRoots设置默认路径。模块types当然在`tsconfig.json`中也可以使用`types`单独控制`@types`。`types`指定的包会被单独引入。这样全局引入就失效了。*.d.ts是什么@types下存放的文件都是.d.ts开头的文件对应的npm包js的类型声明。在.d.ts文件中声明的类型或者模块，在其他文件中不需要使用import导入，可以直接使用，d.ts的类型声明可以自行编写也可以使用工具声明。有2个工具可以使用微软的dts-gen，生成单个文件的声明dtsmake。值得注意的是如果你使用JSDOC语法在ts3.7以后是可以通过命令为js生成.ds文件。具体用法可查看官方文档。介绍完前菜，现在开始进入本文正题。一起来看下reacthooks相关的类型声明吧。在@types/react/index.d.ts文件中。useContext`useContext和createContext`是结合一起使用的useContext定义：functionuseContext(context:Context):TcreateContext定义：functioncreateContext(defaultValue:T,):ContextcreateContext的返回Context类型的值提供给useContext的参数。这里泛型T在2个方法中是一致的，如果不指定ts会类型推导出正确的类型。而Context类型则是一个interfaceinterface Context {  rovider: rovider;  Consumer: Consumer;  displayName?: string | undefined;}`Provider`拥有`value`和`children``Consumer`拥有`children`类型都是`ReactNode|undefined`。想想我们这react中使用`Context`传值是不是感觉很熟悉？看懂类型定义再也不怕忘记api了。useState定义：functionuseState(initialState:S|(()=>S)):[S,Dispatch>]泛型S表示state是用来约束initialState类型，也可以传入返回值是S的方法。useState返回值为2个元素的元组类型，返回state和更新state的方法。默认情况下useState会根据传入类型自动推导出S类型。SetStateAction定义了传入setState的参数类型。是S类型或者返回S类型值的函数的联合类型。SetStateAction的定义为：typeSetStateAction=S|((prevState:S)=>S)，prevState为上一次的state，联合类型暂可以理解成或的关系。而Dispatch表示setState的类型，是一个没有返回值的方法。定义也很简单Dispatch：typeDispatch