当我们在 React 里用上 TS 的时候总是会遇到一些奇奇怪怪的问题,这里汇总一些遇到的问题。

  1. 关于 React.FC 到底要不要写。

    React.FCReact.FunctionComponent interface 的缩写,主要是确定一下函数的返回类型 和一些函数的属性。

    TypeScript React.FC<Props> confusion

    虽然 Google 出来发现不建议使用,但实际上类型已经有了一些变化现在和 React.VFC 是一样的了,没有 child 的声明,想用可以用,可用于明确一下函数类型检查。

    值得注意的是如果要使用普通的函数声明,不考虑使用函数表达式或者箭头函数的话,是没办法用完整的函数类型声明的,所以在 TS 尽量写函数表达式或者箭头函数吧。

  2. 关于 Component 的类型问题,有 ReactNode, ReactElement, JSX.Element 可选,排序由大到小,ReactNode 为最大的,包含了 ReactElementReactElement 可自定义 Template ,JSX.Element 则为 <any, any>ReactElement。另外注意 JSX.IntrinsicElements 是定义小写开头的 HTML 标准 element 的 Props,可以结合 ReactElement 食用。

    When to use JSX.Element vs ReactNode vs ReactElement?