title: Typescript: How to add type check for history object in React?
body: <p>I have the following piece of code, which receives a history object as prop:</p>
  <pre><code>const ChildComponent = ({ history }) =&gt; (
          &lt;div className={styles.body}&gt;
              &lt;div className={styles.cta}&gt;
                  &lt;FloatingActionButton onClick={() =&gt; history.push(routes[4].path)}&gt;
                      &lt;span&gt;Click me&lt;/span&gt;
                  &lt;/FloatingActionButton&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  );
  </code></pre>
  <p>How do I add typecheck for this history prop, <strong>which is received by wrapping it's parent with withRouter HOC</strong>? One way I could think of is to write something like this:</p>
  <pre><code>interface Props {
      history: {
          push(url: string): void;
      };
  }
  </code></pre>
  <p>But I'm sure this is not the right way, because rest of the properties of the history object are being lost.</p>
  <p>Can you suggest the right way of doing this?</p>
  <p><strong>UPDATED the code based on @Oblosys's answer</strong></p>
  <pre><code>import { withRouter, RouteComponentProps } from &quot;react-router-dom&quot;;
  
  interface Props extends RouteComponentProps&lt;any&gt; {
     /* Parent component's props*/
  }
  
  class Parent extends React.Component&lt;Props, {}&gt; {
      render() {
          return &lt;ChildComponent history={this.props.history} /&gt;;
      }
  }
  
  //Child component related stuff
  interface ChildComponentProps extends RouteComponentProps&lt;any&gt; {}
  
  const ChildComponent: React.SFC&lt;ChildComponentProps&gt; = (props) =&gt; (
    &lt;div className={styles.body}&gt;
       &lt;div className={styles.cta}&gt;
           &lt;FloatingActionButton onClick={() =&gt; history.push(routes[4].path)}&gt;
              &lt;span&gt;Click me&lt;/span&gt;
           &lt;/FloatingActionButton&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  );
  
  function mapStateToProps(state: types.AppState) {
      /* related code */
  }
  
  function mapDispatchToProps(dispatch: Redux.Dispatch&lt;types.AppState&gt;{
      /* related code */
  }
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent));
  </code></pre>
  <p>But, now I'm getting the following error:</p>
  <pre><code>Type '{ history: History; }' is not assignable to type 'ChildComponentProps'.
      Property 'match' is missing in type '{ history: History; }'
  </code></pre>