下一个带有react-redux HOC打字稿错误的JS

Question

我一直在尝试为包装大多数下一页的HOC设置正确的类型，但我似乎无法摆脱所有类型错误。

使用当前代码，我在connect函数上遇到类型错误，这是我暂时无法解决的。

我假设我在PageWrapper组件内的组件类型可能做错了吗？

Argument of type 'ConnectedComponent<typeof HomePage, Pick<(ClassAttributes<HomePage> & ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext<any, AnyAction>): {} | Promise<...>; } & IStateProps) | (ClassAttributes<...> & ... 2 more ... & IStateProps), "ref" | ... 5 more ... | "key">>' is not assignable to parameter of type '(ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext<any, AnyAction>): {} | Promise<{}>; }) | (FunctionComponent<...> & { ...; }) | (ComponentClass<...> & ... 1 more ... & { ...; }) | (FunctionComponent<...> & ... 1 more ... & { ...; })'.
  Type 'ConnectedComponent<typeof HomePage, Pick<(ClassAttributes<HomePage> & ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext<any, AnyAction>): {} | Promise<...>; } & IStateProps) | (ClassAttributes<...> & ... 2 more ... & IStateProps), "ref" | ... 5 more ... | "key">>' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext<any, AnyAction>): {} | Promise<{}>; }'.
    Type 'ConnectedComponent<typeof HomePage, Pick<(ClassAttributes<HomePage> & ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext<any, AnyAction>): {} | Promise<...>; } & IStateProps) | (ClassAttributes<...> & ... 2 more ... & IStateProps), "ref" | ... 5 more ... | "key">>' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters 'props' and 'props' are incompatible.
        Type '{ children?: ReactNode; }' has no properties in common with type 'Pick<(ClassAttributes<HomePage> & ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext<any, AnyAction>): {} | Promise<...>; } & IStateProps) | (ClassAttributes<...> & ... 2 more ... & IStateProps), "ref" | ... 5 more ... | "key">'.ts(2345)

HomePage.tsx

import Layout from 'components/Layout'
import PageWrapper from 'components/PageWrapper'
import { NextPage } from 'next'
import React from 'react'
import { connect } from 'react-redux'
import { IContactState } from 'redux/contact/reducer'
import { IApplicationState } from 'redux/store'

interface IStateProps {
  contact: IContactState
}

class HomePage extends React.Component<NextPage & IStateProps> {
  render() {
    const { contact } = this.props

    return (
      <Layout title="Dashboard">
        <section className="dashboard-wrapper">
          <div className="dashboard">
            <h1>Welcome {contact.firstName}</h1>
          </div>
        </section>
      </Layout>
    )
  }
}

const mapStateToProps = (state: IApplicationState): IStateProps => ({
  contact: state.contact
})

export default PageWrapper(connect(mapStateToProps)(HomePage))

PageWrapper.tsx

import { NextComponentType, NextPageContext } from 'next'
import React from 'react'

const PageWrapper = (Component: React.ComponentType & NextComponentType) => (
  class extends React.Component<NextComponentType> {
    static async getInitialProps (ctx: NextPageContext) {

      return {
        ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : undefined),
      }
    }

    render() {
      return (
        <Component {...this.props} />
      )
    }
  }
)

export default PageWrapper