Как передать типы в функциональный компонент в реакции, используя redux connect

Question

Так что, в основном, у меня есть функция соединения с mapStateToProps и mapDispatchToProps с моим функциональным компонентом, но если я пытаюсь получить доступ к набранному тексту реквизита, выдается ошибка

const Navbar: FC = ({ route, doChangeRoute }) => {
    //... code here bla bla 
}

const mapStateToProps = ({ routeReducer }: AppState) => {
    const { route } = routeReducer;
    return { route };
};

const mapDispatchToProps = dispatch => bindActionCreators({ doChangeRoute }, dispatch);

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Navbar);

// ERROR: Property 'route' does not exist on type '{ children?: ReactNode; }'.  TS2339

Answer 1

Вам нужно указать типы при использовании connect, чтобы сделать TypeScript счастливым:

export default connect<StateType, ConnectProps, OwnProps>(
    mapStateToProps, mapDispatchToProps
)(Navbar)

Где:

StateType - это тип вашего штата или просто введите {}, если у вас нет штата.

ConnectProps - это тип соединения, которое будет назначено вашему компоненту

OwnProps - это тип реквизита, ожидаемый компонентом, который не приходит из connect