So basically i have the connect function with mapStateToProps and mapDispatchToProps with my functional component, but if i try to access the props typescript throws an error

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

1 Answers

0
thedude On

You need to specify the types when using connect to make TypeScript happy:

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

Where:

StateType is the type of your state or just pass {} if you have no state.

ConnectProps is the type of the props connect will assign to your component

OwnProps is the type of the props expected by the component that do not come from connect