You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
interfaceLoDashStatic{isBoolean(value?: any): value is boolean;isString(value?: any): value is string;isArray(value?: any): value is any[];isEmpty(value?: any): boolean;// 这里的定义会使得业务中时使用出现什么问题?}
React
React.FC
PropsWithChildren
为IHelloProps
注入children
类型React.FC
声明组件,通过泛型参数传入组件Props
类型react@16
类型定义中React.FC
自带children
类型,无需额外处理(即可省略第 1 步)html
属性,如className
、style
等,可以直接extends HTMLAttributes<HTMLDivElement>
,其中HTMLDivElement
可替换为所需要的类型,如HTMLInputElement
不推荐 React.FC?
Remove React.FC from Typescript template #8177
在这个 PR 里移除了 CRA 默认模板的 React.FC,主要有以下几点理由:
<Select.Option>
好处则是提供了返回值约束。
站在今天回看:
所以是否使用 React.FC 可以自行选择:
若对于返回值有明确的类型要求,配置了 typescript 规则,那么可以使用 React.FC,其他时候可以直接定义 Props interface,如下所示:
React.forwardRef
React 提供了
forwardRef
函数用于转发 Ref,该函数也可传入泛型参数,如下:React.ComponentProps
用于获取组件 Props 的工具泛型,与之类似的还有:
使用第三方库组件时,不要使用具体 path 去引用类型(若第三方组件后续升级修改了内部文件引用路径,会出现错误)。
若入口文件未暴露对应组件的相关类型声明,使用
React.ComponentProps
另外一个例子:
类型收窄
某些场景传入的参数为联合类型,需要基于一些手段将其类型收窄(Narrowing)。
使用 type predicates: is
思考一下 Lodash 的
isBoolean
/isString
/isArray
...等函数,再思考一下使用isEmpty
有什么不对。类型安全的 redux action
TS Playground - An online editor for exploring TypeScript and JavaScript
多参数类型约束
以非常熟悉的
window.addEventListener
为例:可以发现
addEventListener
的回调函数入参类型(event)会随着监听事件的不同而不同,addEventListener
的函数签名如下:type
为泛型 K,约束在WindowEventMap
的 key 范围内,再基于 K 从WindowEventMap
推导出 ev 事件类型即可。常用工具泛型
把一个个工具泛型理解成函数,类型作为入参和返回值即可,通过 cmd + 左键点击具体工具泛型阅读具体实现也可。
推荐阅读
The text was updated successfully, but these errors were encountered: