Typescript React HOC 错误与提升非反应静态

Question

我正在使用 react 和 typescript 以及提升非反应静态并尝试创建一个 HOC。我已经将代码简化为一个人为的 HOC，它用 div 包装了组件。

const withWrapper = <TProps extends {}>(
  WrappedComponent: React.ComponentType<TProps>,
) => {
  const WithWrapper: React.FC<TProps> = (props: TProps) => (
    <div>
      <WrappedComponent {...props} />
    </div>
  )

  WithWrapper.displayName = `WithWrapper(${
    WrappedComponent.displayName || WrappedComponent.name || 'Component'
  })`

  return hoistNonReactStatics(WithWrapper, WrappedComponent)
}

但得到错误：

Argument of type 'ComponentType<TProps>' is not assignable to parameter of type 'ComponentType<any>'.
  Type 'ComponentClass<TProps, any>' is not assignable to type 'ComponentType<any>'.
    Type 'ComponentClass<TProps, any>' is not assignable to type 'FunctionComponent<any>'.
      Type 'ComponentClass<TProps, any>' provides no match for the signature '(props: any, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.

     return hoistNonReactStatics(WithWrapper, WrappedComponent)
                                              ~~~~~~~~~~~~~~~~

为什么这是无效的？让它通过的唯一方法是投射WrappedComponent as React.ComponentType<any>。

编辑：打字稿@2.9.2 @types/react@16.8.4 @types/hoist-non-react-statics@3.0.1

Answer 1

您的代码适用于typescript@3.3.1、@types/react@16.8.4 和@types/hoist-non-react-statics@3.0.1。

您的代码中唯一不正确的是使用单管道 (|) 而不是双管道。单管道用于按位或，而双管道用于短路——我相信你的意思是后者。