TypeScript с React Lazy, получая ошибку обещания - PullRequest
Новая
       31

TypeScript с React Lazy, получая ошибку обещания

0 голосов
/ 04 мая 2019

Я использую реагирование с машинописью. Я использовал компонент более высокого порядка, чтобы проверить, аутентифицирован ли пользователь или нет. После добавления hoc я получаю ошибку в маршрутах, как показано ниже 

 /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 |

Routes.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;

СПЕЦИАЛЬНЫЙ: 

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);

Так как я новичок в машинописи, я не смог понять, что это за ошибка

1 Ответ

2 голосов
/ 04 мая 2019

Я могу только предположить, что эта ошибка вызвана тем, что экспорт по умолчанию Dashboard имеет тип {} (возвращается из функции compose), который не соответствует сигнатуре компонента React.

Попробуйте изменить строку экспорта в Dashboard на: 

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

Это приведет к принудительному приведению экспорта к правильному типу, что позволит React.lazy работать.

...