Тип элемента JSX 'App' не имеет никакой конструкции или сигнатуры вызовов

Question

Я переписываю свое приложение React в Typescript и у меня возникают проблемы при переписывании моего HO C. Это HO C для сессии. Вот мой withSession.tsx HO C:

import React from 'react'
import { connect } from 'react-redux'

import { selectors } from 'redux/tokens'
import { Tokens } from 'redux/tokens/types'
import { SessionContext } from 'contexts/sessionContext'

const withSession = () => {
  const WithSession = <T extends Tokens>(WrappedComponent: React.ComponentType<T>): React.FC<T & Tokens> => {
    return ({accessToken, refreshToken, expiry, ...props}: Tokens) => {
      return (
        <SessionContext.Provider value={{accessToken, refreshToken, expiry}}>
          <WrappedComponent {...props as T} />
        </SessionContext.Provider>
      )
    }
  }

  const mapStateToProps = (state: any) => {
    return {
      tokens: selectors.tokens(state),
    }
  }

  const withSessionConnected = connect<any, {}, any>(
    mapStateToProps,
  )(WithSession as any)

  return withSessionConnected
}

export default withSession

И мой App.ts такой:

import withSession from 'hocs/withSession'

const App: React.FC<Props> = ({test}: Props) => {
  return <div>This is my App</div>
}

export default withSession()(App)

Может кто-нибудь помочь мне понять, почему он жалуется на App не имеет никакой конструкции или подписи вызовов? Заранее спасибо за помощь!

Answer 1

Это может быть вызвано неявным экспортом компонента App как React.ComponentType или React.Element. По крайней мере, именно это помогло мне в очень похожей ситуации при работе с HO C.

import withSession from 'hocs/withSession'

const App: React.FC<Props> = ({test}: Props) => {
  return <div>This is my App</div>
}

export default withSession()(App) as React.ComponentType