反应打字稿如何打字

Question

我想在全新项目中使用打字稿，但是我很难键入HOC组件

const withClass = (Wrapped: Component<any, {}, any>, className: string) => {
  return props => (
    <div className={className}>
      <Wrapped />
    </div>
  );
};

此错误不起作用

类型错误：类型'App的类型'的参数不能分配给'组件'类型的参数。 类型“应用程序类型”缺少类型“组件”中的以下属性：上下文，setState，forceUpdate，渲染以及其他3个属性。 TS2345

那么正确的方法是什么？

Answer 1

Component<...>类型指定React.Component的实例。

如果目的是提供组件本身并且不将HOC限制为对组件进行分类，则正确的类型是ComponentType ：

const withClass = (Wrapped: React.ComponentType<any>, className: string) => { ... }

最好使用特定的props类型而不是any 。 如果像HOC通常期望的那样，将道具传递到包装的组件，则也应解决此问题 ：

const withClass = <P extends {}>(Wrapped: React.ComponentType<P>, className: string) => {
  return props => (
    <div className={className}>
      <Wrapped {...props as P} />
    </div>
  );
};