Typescript - рендеринг связанных компонентов

Question

Используя TypeScript и React / Redux, я набрал ConnectedComponent. Но когда я пытаюсь визуализировать этот компонент, TypeScript выдает ошибку, сообщающую, что необходимые реквизиты не пройдены.

interface Props extends MapStateProps {

}

class App extends React.Component<Props, {}> {
  render(): JSX.Element {
    return (
      <>
        <Router>
          <Switch>
            <Route path="/" component={Dashboard} />
          </Switch>
        </Router>
      </>
    );
  }
}

interface MapStateProps {
  user: UserState;
}

const MapStateToProps = (state: AppState): MapStateProps => ({
  user: state.user,
});

const connectedApp = connect(MapStateToProps, null)(App);

export {
  connectedApp as App,
};

Затем, когда я рендерил компонент, как:

<App />

Это говорит о том, что приложение требует реквизиты пользователя. Как я могу сделать это, не устанавливая опору пользователя как опциональную?

Answer 1

Пожалуйста, попробуйте это и посмотрите, поможет ли это.

interface UserState{}
interface AppState{
  user: UserState;
}
interface MapStateProps {
  user: UserState;
}
interface Props extends MapStateProps {}

class App2 extends React.Component<Props, {}> {
  render(): JSX.Element {
    return (
      <div>
          App2
      </div>
    );
  }
}

const MapStateToProps = (state: AppState): MapStateProps => ({
  user: state.user,
});

export default connect(MapStateToProps, null)(App2);

Answer 2

Замена

export {
  connectedApp as App,
};

При экспорте по умолчанию:

export default connectedApp;

А затем импорт

import {App} from './App';

Для

import App from './App';