React有对应的声明文件。声明文件通过一些基本语法来定义一些类型，从而获得TypeScript中的类型检查、界面提示等特性和功能。用TS开发也可以避免自己写。一些复杂的ts结构类型，我们来看看如何使用React中定义的ts语法。一、基本知识俗话说：“授人以鱼不如授人以渔”。今天不知道自己是“鱼”还是“渔夫”，就说说我这几天学习React语法的苦恼之路吧。.看看typescript中文文档，再总结一波学习笔记。总结之后发现ts有推断类型的能力，很多类似React这样的框架项目是没有用到的！！！打开网上的疯狂搜索功能，看看有没有关于React的文章，搜了一下。确实有一些，说说React特有的类型；卧槽，我非得背这些新API才能用Ts吗？这不是作弊吗？Reducer，发生神奇的跳转，跳转到index.d.ts；这不是申报文件吗？然后仔细分析Reducer；typeReducer=(prevState:S,action:A)=>S;这不就是一个函数的类型别名吗？S和A这两个是泛型，返回值是S。如果是这样的话，我根本不用记住很多这个类型。当我需要的时候，直接点击这个功能，跳转到对应的声明文件，仔细研究就可以了。哈哈，好像是这样的。【自己试了一下，确实可以解决80%的问题】不过为了提高开发效率，节省自己研究的成本，还是在React里面写了几个常用的ts语法，方便用于开发期间的应用。2.React的内置函数React的内置函数很多，我们挑几个常用的来学习一下。2.1React.FCReact.FC<>是TypeScript中函数式组件使用的泛型类型。FC是FunctionComponent的缩写。实际上，React.FC可以写成React.FunctionComponent。importReactfrom'react';interfacedemo1PropsInterface{attr1:string,attr2?:string,attr3?:'w'|'ww'|'ww'};//函数组件，也是一个类型别名//typeFC=FunctionComponent;//FunctionComponent是一个接口，包含它的函数定义和对应的返回属性//interfaceFunctionComponent{//接口可以表示函数类型，通过定义接口的调用签名//(props:PropsWithChildren,context?:any):ReactElement|null;//propTypes?:WeakValidationMap|未定义；//上下文类型？:ValidationMap<任何>|undefined;//defaultProps?:Partial
|undefined;//显示名称?:string|undefined;//}constDemo1:React.FC=({attr1,attr2,attr3})=>{return(hellodemo1{attr1}
);};导出默认Demo1;2.2React.ComponentReact.Component是定义类组件类型的泛型，第一个参数是props，第二个参数是state。importReactfrom"react";//道具接口demo2PropsInterface{props1:string};//状态接口demo2StateInterface{state1:string};Demo2类扩展React.Component{constructor(props:demo2PropsInterface){super(props);this.state={state1:'state1'}}render(){return({this.state.state1+this.props.props1}
);}}导出默认Demo2；2.3React.createContext、useContext、useReducer中的Ts经常一起使用，实现跨级组件之间的数据传递。ts版本是这样的：React.createContext会创建一个Context对象，当React渲染一个订阅了这个Context对象的组件时，这个组件会从组件树中离自己最近的匹配Provider中读取当前的context值。【注意：只要组件所在的树没有匹配到Provider，它的defaultValue参数就会生效】constMyContext=React.createContext(defaultValue);constDemo=()=>{return(//注意：每个Context对象都会返回一个ProviderReact组件，它允许消费组件订阅上下文变化。//...);}useContext接收一个context对象（React.createContext的返回值），返回context的当前值。当前上下文值由上层组件中距离当前组件最近的valueprop确定。语法如下：“constvalue=useContext(MyContext);”从“反应”导入反应，{useContext}；constMyContext=React.createContext('');constDemo3Child:React.FC<{}>=()=>{constcontext=useContext(MyContext);return({context}
);}constDemo3:React.FC<{}>=()=>{const[state,dispatch]=useReducer(reducer,initialState);}返回（};useReduceruseState的替代方案，它以(state,action)=>newState的形式接收一个reducer，并返回当前状态及其匹配的dispatch方法。语法如下：“const[state,dispatch]=useReducer(reducer,initialArg,init);”importReact,{useReducer,useContext}from"react";interfacestateInterface{count:number};interfaceactionInterface{type:string,data:{[propName:string]:any}};constinitialState={count:0};//React.Reducer其实是一个类型别名，本质上就是typeReducer=(prevState:S,action:A)=>S;//因为reducer是一个函数，它接受两个泛型参数S和A、返回S类型的constreducer：React.Reducer=(state,action)=>{const{type,data}=action;switch(type){case'increment':{return{...state,count:state.count+data.count};}case'decrement':{return{...state,count:state.count-data.count};}默认值：{返回状态；}}}//React.createContext返回一个对象，对象接口用接口表示//输入是泛型的参数，作为整个接口的一个参数//interfaceContext{//Provider:Provider;//Consumer:Consumer;//displayName?:string|未定义;//}constMyContext:React.Context<{state:stateInterface,dispatch?:React.Dispatch}>=React.createContext({state:initialState});constDemo3Child:React.FC<{}>=()=>{const{state,dispatch}=useContext(MyContext);consthandleClick=()=>{if(dispatch){dispatch({type:'increment',data:{count:10}})}};return({state.count}增加
);}constDemo3:React.FC<{}>=()=>{const[state,dispatch]=useReducer(reducer,initialState);返回();};exportdefaultDemo3;3、React中的事件处理函数React中的事件在编码中经常用到，比如onClick、onChange、onMouseMove等，那么应该如何使用呢？3.1不带事件参数当对应的事件处理函数不带事件参数时，此时使用起来非常简单，如下图：constTest:React.FC<{}>=()=>{consthandleClick=()=>{//做一系列的处理};return(button
);};3.2有事件参数的老手可以试试，当事件处理函数在等待事件参数时，如果你这样做不做任何处理，肯定会报错。这时候按照第一节的方法论试试：带上事件参数，报错；constTest:React.FC<{}>=()=>{//报错，注意不要这样写...consthandleClick=event=>{//做一系列的处理event.preventDefault();};return(button
);};点击onClick参数跳转到index.d.ts文件；//onClick是MouseEventHandleronClick的类型吗?:MouseEventHandler|undefined;//那MouseEventHandler是什么？原来的是类型别名，泛型就是Element类型typeMouseEventHandler=EventHandler>;//那么什么是泛型Element呢？它是一个接口，其他很多接口都是继承这个接口实现的。interfaceElement{}interfaceHTMLElementextendsElement{}interfaceHTMLButtonElementextendsHTMLElement{}interfaceHTMLInputElementextendsHTMLElement{}//到目前为止，我们知道这个位置应该如何实现；constTest:React.FC<{}>=()=>{consthandleClick:React.MouseEventHandler=event=>{//做一系列的处理event.preventDefault();};返回(按钮
);};和其他事件一样，按照上面三个步骤完成一篇文章，不需要所谓的死记硬背4.普通函数普通函数是通用的，这里还是提一下。特定类型的输入输出函数；//参数输入是number类型，通过类型判断输出也是number函数。testFun1(count:number){returncount*2;}一个不确定类型的输入输出函数，但是输入，输出函数类型相同；//使用泛型函数testFun2(arg:T):T{returnarg;}async函数，return是一个Promise对象，可以使用then方法添加回调函数，Promise是一个泛型Function，T泛型变量用于判断then方法接收到的第一个回调函数的参数类型。//使用接口interfacePResponse{result:T,status:string};//除了使用接口，还可以使用对象//typePResponse={//result:T,//status:string//};asyncfunctiontestFun3():Promise>{return{status:'success',result:10}}
