Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript: How to add type check for history object in React?

I have the following piece of code, which receives a history object as prop:

const ChildComponent = ({ history }) => (         <div className={styles.body}>             <div className={styles.cta}>                 <FloatingActionButton onClick={() => history.push(routes[4].path)}>                     <span>Click me</span>                 </FloatingActionButton>             </div>         </div> ); 

How do I add typecheck for this history prop, which is received by wrapping it's parent with withRouter HOC? One way I could think of is to write something like this:

interface Props {     history: {         push(url: string): void;     }; } 

But I'm sure this is not the right way, because rest of the properties of the history object are being lost.

Can you suggest the right way of doing this?

UPDATED the code based on @Oblosys's answer

import { withRouter, RouteComponentProps } from "react-router-dom";  interface Props extends RouteComponentProps<any> {    /* Parent component's props*/ }  class Parent extends React.Component<Props, {}> {     render() {         return <ChildComponent history={this.props.history} />;     } }  //Child component related stuff interface ChildComponentProps extends RouteComponentProps<any> {}  const ChildComponent: React.SFC<ChildComponentProps> = (props) => (   <div className={styles.body}>      <div className={styles.cta}>          <FloatingActionButton onClick={() => history.push(routes[4].path)}>             <span>Click me</span>          </FloatingActionButton>      </div>    </div> );  function mapStateToProps(state: types.AppState) {     /* related code */ }  function mapDispatchToProps(dispatch: Redux.Dispatch<types.AppState>{     /* related code */ }  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent)); 

But, now I'm getting the following error:

Type '{ history: History; }' is not assignable to type 'ChildComponentProps'.     Property 'match' is missing in type '{ history: History; }' 
like image 442
Ivin Avatar asked Mar 17 '18 22:03

Ivin


People also ask

How do you view object history in react?

Through the history object, we can access and manipulate the current state of the browser history. All we need to do is to call the useHistory hook inside a functional component: import { useHistory } from 'react-router-dom'; const App = () => { const history = useHistory(); const redirect = () => { history.

What is RouteComponentProps?

RouteComponentProps looks to be a Typescript interface definition of react-router-dom's route-props. The RouteComponentProps prop-types definition may've been part of react-router-dom but isn't currently exported. I found the Typescript export in Definitely Typed.


1 Answers

You can use the RouteComponentProps interface, which declares all props passed by withRouter:

import { RouteComponentProps } from 'react-router-dom'; .. interface ChildComponentProps extends RouteComponentProps<any> {   /* other props for ChildComponent */ } const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (   .. ); 

The type parameter to RouteComponentProps is the type of the params property in match, so you won't need it unless you're matching named path segments.

Alternatively, if history doesn't come from withRouter but is passed by itself as a prop, you can import the type from history:

import { History } from 'history'; .. interface ChildComponentProps {   history : History   /* other props for ChildComponent */ } const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (   .. ); 
like image 151
Oblosys Avatar answered Sep 20 '22 13:09

Oblosys