当我们在 React 里用上 TS 的时候总是会遇到一些奇奇怪怪的问题,这里汇总一些遇到的问题。
关于 React.FC
到底要不要写。
React.FC
是 React.FunctionComponent
interface 的缩写,主要是确定一下函数的返回类型 和一些函数的属性。
TypeScript React.FC<Props> confusion
虽然 Google 出来发现不建议使用,但实际上类型已经有了一些变化现在和 React.VFC
是一样的了,没有 child
的声明,想用可以用,可用于明确一下函数类型检查。
值得注意的是如果要使用普通的函数声明,不考虑使用函数表达式或者箭头函数的话,是没办法用完整的函数类型声明的,所以在 TS 尽量写函数表达式或者箭头函数吧。
关于 Component 的类型问题,有 ReactNode
, ReactElement
, JSX.Element
可选,排序由大到小,ReactNode
为最大的,包含了 ReactElement
,ReactElement
可自定义 Template ,JSX.Element
则为 <any, any>
的 ReactElement
。另外注意 JSX.IntrinsicElements
是定义小写开头的 HTML 标准 element 的 Props,可以结合 ReactElement
食用。