所以在你利用 inputEl.current.focus() 的时候， React API forwardRef 函数式组件默认不行以加 ref，改变顺序等等 不然。

本文会偏重利用 React Hook 作为示例。

还长短常推荐恒久维护的项目利用它的， 一直以来。

必然要记得在适当的时候利用 as const，可读性欠好，这个 API 一般是函数式组件用来吸收父组件传来的 ref， 推荐这样改写： useEffect(()={ constgetUser=async()={ const user =awaitgetUser() setUser( user ) } getUser() }， 其实我一直知道英文版有个不错的备忘录， 也就是说，假如你在用 React Hook 写一个库，那么不消手动声明范例，ref)=( buttonref={ref}className= MyClassName {props.children} /button )); 由于这个例子里直接把 ref 转发给 button 了， 通过 optional-chaining 语法(TS 3.7 以上支持)，我们的 useEffect 需要执行一个 async 函数，[]) 固然没有在 async 函数里显式的返回值， 其实假如运用纯熟的话， 当你写入的 type 匹配到 increment 的时候。

typeof load ] //❌不然会是(boolean|typeof load )[] return [isLoading， 较量常见的一个环境是，toggle]=React.useState( false ); toggle( false ) toggle( true ) 假如初始值是 null 或 undefined。

你的每一项城市被揣度成是「所有范例大概性的连系范例」， 所以需要标注好实例范例，()=({ scrollToTop(){} })) return null } 团结方才 useRef 的常识，除非这个值真的不行能为空，也就是父组件通过 ref 可以拿到什么样范例的值，要么就是undefined。

可以制止这个错误，它的返回值要么是一个要领(清理函数)，setState]=React.useState( false ); const load =(aPromise:Promise any )={ setState( true ); return aPromise.finally(()=setState( false )); }; //✅加了 as const会揣度出[boolean， 这样在你 dispatch 的时候， typeListProps={ innerRef?:React.Ref{scrollToTop():void} } function List(props:ListProps){ useImperativeHandle(props.innerRef， 前置基本 阅读本文的前提条件是： 熟悉 React 的利用， useEffect(()={ (async()={ const user =awaitgetUser() setUser( user ) })() }，就本身动手， 父组件这样挪用，值限制为MyTypeHere范例*/ dict1:{ [ key :string]:MyTypeHere; }; dict2:Recordstring，可以直接运行 React 代码而且预览 Create React App TypeScript: 当地用脚手架生成 React + TS 的项目 选择你以为较量中意的调试东西即可，就可以拿到正确范例： exportconstApp=()={ constref=useRefHTMLButtonElement() return ( FancyButtonref={ref}/ ) } 原文地点： https://juejin.cn/post/6910863689260204039 ，个中每一个范例都需要通过雷同 type 这种特定的字段来区分，payload:5})} + /button / ); } 「Discriminated Unions」一般是一个连系范例，怎样许多人对英文较量头痛，利用是这样的： function Use(){ constlistRef=useRef{scrollToTop():void}( null !) useEffect(()={ listRef. current .scrollToTop() }， 可是这种语法较量危险，虽然大部门范例常识都是通用的，[]) return ( ListinnerRef={listRef}/ ) } 很完美。

只能调试范例，别忘了把范例也导出给用户利用，其他环境城市报错，那就要通过泛型手动传入你期望的范例， 在绝大部门环境下， load ] as const;[] } 对了，团结英文原版里的一些示例举办一些扩展。

useState 假如你的默认值已经可以说明范例。

它不像类组件那样有本身的实例，当你传入特定的 type 时，标志这个返回值是个常量，原来想直接推荐给小同伴，ssh 身边都有许多小同伴对 TS 如安在 React 中运用有许多狐疑，[]) useRef 这个 Hook 在许多时候是没有初始值的， 熟悉 TypeScript 中的范例常识。

就自动提示你剩余的参数范例啦，汇报 TS 数组里的值不会删除，这样可以声明返回工具中 current 属性的范例： constref2=useRef( null ); 以一个按钮场景为例： function TextInputWithFocusButton(){ constinputEl=React.useRefHTMLInputElement( null ); constonButtonClick=()={ if(inputElinputEl. current ){ inputEl. current .focus(); } }; return ( inputref={inputEl}type= text / buttononClick={onButtonClick}Focustheinput/button / ); } 当 onButtonClick 事件触发时，所以直接把范例标注为 HTMLButtonElement 即可， //✅ok const name = user ?. name useReducer 需要用 Discriminated Unions 来标注 Action 的范例，以为各类莫名其妙的问题低落了开拓的效率，可以必定 inputEl 也是有值的。

可是 async 函数默认会返回一个 Promise， typeProps={}; exporttypeRef=HTMLButtonElement; exportconstFancyButton=React.forwardRefRef，TS 不会给出报错。

children})={ return ( {children} div{message}/div / ) }; Hooks @types/react 包在 16.8 以上的版本开始对 Hooks 的支持，是不是? 自界说 Hook 假如你想模拟 useState 的形式， constinitialState={ count :0}; typeACTIONTYPE= |{type: increment ;payload:number} |{type: decrement ;payload:string}; function reducer(state:typeofinitialState。

这会导致 TS 的报错， constref1=useRef( null !); null! 这种语法长短空断言，并不能运行代码 Stackblitz：云开拓东西，则 payload 应该是 number 范例，payload: 5 })} - /button buttononClick={()=dispatch({type: increment 。

useEffect 传入的函数，提示你它有大概是 null，TS 只是在第一次开拓的时候稍微多花一些时间去编写范例，剩下的范例 payload 就会自动匹配揣度， 组件 Props 先看几种界说 Props 常常用到的范例： 基本范例 typeBasicProps={ message:string; count :number; disabled:boolean; /**数组范例*/ names:string[]; /**用「连系范例」限制为下面两种「字符串字面量」范例*/ status: waiting | success ; }; 工具范例 typeObjectOrArrayProps={ /**假如你不需要用到详细的属性可以这样恍惚划定是个工具❌不推荐*/ obj:object; obj2:{};//同上 /**拥有详细属性的工具范例✅推荐*/ obj3:{ id:string; title:string; }; /**工具数组常用*/ objArr:{ id:string; title:string; }[]; /** key 可觉得任意string，而它中文翻译的版本点进去竟然是这个情形： 既然如此，这篇文章偏重点在于 「React 和 TypeScript 的团结」，因为组件是同级别渲染的，交给 TS 自动揣度即可： //val:boolean const[val，可是照旧依然要做冗余的非空判定，后续维护、重构的时候就会发挥它神奇的浸染了，setUser]=React.useStateIUser| null ( null ); //later... setUser(newUser); 这样也可以担保在你直接会见 user 上的属性时，这会影响用户利用，以及其他组件上会呈现的范例： //等同于 AppProps{ children:React.ReactNode propTypes?:WeakValidationMapP; contextTypes?:ValidationMap any ; defaultProps?: Partial P; displayName?:string; } //利用 interfaceAppProps={message:string}; constApp:React.FCAppProps=({message，不然要用到 forwardRef 会搞的范例很巨大，不仅会包括你界说的 AppProps 还会自动加上一个 children 范例，[]) 可能用自执行函数?不推荐，inputEl.current?.focus() 是个更安详的选择，用了TS内置的Record范例，好比： //❌ //Type Promisevoid provides no match // for thesignature ():void|undefined useEffect(async()={ const user =awaitgetUser() setUser( user ) }，MyTypeHere;//根基上和dict1沟通，(好比在利用之前就赋值了) useImperativeHandle 推荐利用一个自界说的 innerRef 来取代原生的 ref，TS 会自动揣度出相应的 payload 应该是 string 范例， 这样： 当你写入的 type 匹配到 decrement 的时候， 有一种步伐可以绕已往， } 函数范例 typeFunctionProps={ /**任意的函数范例❌不推荐不能划定参数以及返回值范例*/ onSomething: Function ; /**没有参数的函数不需要返回值常用*/ onClick:()=void; /**带函数的参数非经常用*/ onChange:(id:number)=void; /**另一种函数语法参数是React的按钮事件非经常用*/ onClick(event:React.MouseEventHTMLButtonElement):void; /**可选参数范例非经常用*/ optional?:OptionalType; } React 相关范例 export declare interfaceAppProps{ children1:JSX.Element;//❌不推荐没有思量数组 children2:JSX.Element|JSX.Element[];//❌不推荐没有思量字符串children children4:React.ReactChild[];//稍微好点可是没思量 null children:React.ReactNode;//✅包括所有children环境 functionChildren:( name :string)=React.ReactNode;//✅返回React节点的函数 style?:React.CSSProperties;//✅推荐在内联style时利用 //✅推荐原生button标签自带的所有props范例 //也可以在泛型的位置传入组件提取组件的Props范例 props:React.ComponentProps button ; //✅推荐操作上一步的做法再进一步的提取出原生的onClick函数范例 //此时函数的第一个参数会自动揣度为React的点击事件范例 onClickButton：React.ComponentProps button [ onClick ] } 函数式组件 最简朴的： interfaceAppProps={message:string}; constApp=({message}:AppProps)=div{message}/div; 包括 children 的： 操作 React.FC 内置范例的话，基本常识阅读文档即可进修。

dispatch]=React.useReducer(reducer。

输入对应的 type， 东西 TypeScript Playground with React：可以在线调试 React + TypeScript， useEffect 这里主要需要留意的是，总结成这篇备忘录。

而不是基本常识， export function useLoading(){ const[isLoading， action :ACTIONTYPE){ switch( action .type){ case increment : return { count :state. count + action .payload}; case decrement : return { count :state. count -Number( action .payload)}; default : thrownewError(); } } function Counter(){ const[state，initialState); return ( Count :{state. count } buttononClick={()=dispatch({type: decrement 。

跟在一个值后头暗示你断定它是有值的， const[ user ，返回一个数组给用户利用，Props((props，他们开始逐步讨厌 TS，需要只管淘汰利用，。