reactjs - TypeScript med React Lazy får löftefel

Jag använder React med TypeScript. Jag har använt en higher order component för att kontrollera om användaren är autentiserad eller inte. Efter att ha lagt till HOC får jag felet i rutterna som nedan

 /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/navigation/routes.ts
TypeScript error in /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/navigation/routes.ts(7,36):
Type 'Promise<typeof import("/home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/pages/Secure/Dashboard/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Type 'typeof import("/home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/remsys/src/pages/Secure/Dashboard/index")' is not assignable to type '{ default: ComponentType<any>; }'.
    Types of property 'default' are incompatible.
      Type '{}' is not assignable to type 'ComponentType<any>'.
        Type '{}' is not assignable to type 'FunctionComponent<any>'.
          Type '{}' provides no match for the signature '(props: any, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null'.  TS2322

     5 | export const SignIn = React.lazy(() => import('pages/Public/SignIn'));
     6 | 
  >  7 | const Dashboard = React.lazy(() => import('pages/Secure/Dashboard'));
       |                                    ^
     8 | 
     9 | const routes = [{ path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard }];
    10 |

Rutter.ts

   export const DefaultLayout = React.lazy(() => import('../containers/DefaultLayout'));

const Dashboard = React.lazy(() => import('../pages/Secure/Dashboard'));

const routes = [{ path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard }];

export default routes;

HOC :

interface HocProps {
  authUser: AuthToken;
  history?: any;
}


const withAuthentication = () => (Component: any) => {
  class WithAuthentication extends React.Component<HocProps, {}> {
    componentDidMount() {
      if (isEmpty(this.props.authUser)) {
        this.props.history.push('/signin');
      }
    }

    render() {      
      return this.props.authUser ? <Component {...this.props} /> : null;
    }
  }

  function mapStateToProps() {
    return {
      authUser: getAuthHeaders()
    };
  }

  return compose(
    withRouter,
    connect(mapStateToProps)
  )(WithAuthentication);
};

export default withAuthentication;

Dashboard.tsx:

const Dashboard = () => <div>Dashboard</div>;

export default compose(
    withAuthentication(),
    connect(null)
)(Dashboard);

Eftersom jag är ny på TypeScript kunde jag inte lista ut vilken typ av fel det är

Svar #1

Jag kan bara anta att detta fel orsakas eftersom standardexporten av Dashboard är av typen {} (returnerad från compose-funktionen) vilket inte matchar React-komponentsignaturen.

Försök ändra exportraden i Dashboard till:

export default compose(
    withAuthentication(),
    connect(null)
)(Dashboard) as React.ComponentType<any>;

Detta kommer att tvinga exporten att kastas till rätt typ, vilket möjliggör för React.lazy att fungera.

Relaterade artiklar