title: How to use TypeScript with withRouter, connect, React.Component and custom properties?
body: <p>I have a React <code>Component</code> that uses <code>connect</code>, <code>withRouter</code> and receives custom properties. I am trying to convert this to TypeScript and I'm wondering if I'm doing this correctly. At least, I have no errors, now.</p>
  
  <p>This is the code that shows the concept:</p>
  
  <pre><code>import * as React from 'react'
  import { connect } from 'react-redux';
  import { withRouter, RouteComponentProps } from 'react-router';
  
  import { 
    fetchTestLists,
    newTestList,
    displayTestList,
  } from '../../../actions/index';
  
  interface StateProps {
    testList: any;    // todo: use the type of state.myList to have validation on it
  }
  
  interface DispatchProps {
    fetchTestLists: () =&gt; void;
    newTestList: () =&gt; void;
    displayTestList: (any) =&gt; void;   // todo: replace any with the actual type
  }
  
  interface Props {      // custom properties passed to component
    className: string;
  }
  
  type PropsType = StateProps &amp; DispatchProps &amp; Props;
  
  
  class MyTest extends React.Component&lt;PropsType &amp; RouteComponentProps&lt;{}&gt;, {}&gt; {
    constructor(props) {
      super(props);
      this.handleCellClick = this.handleCellClick.bind(this);
      this.newTestList = this.newTestList.bind(this);
    }
  
    componentDidMount() {
      this.props.fetchTestLists();
    }
  
    handleCellClick(row, column, event) {
      this.props.displayTestList(row);
    }
  
    newTestList(e) {
      this.props.newTestList()
    }
  
    render() {
      return (
        &lt;div className={this.props.className}&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state): StateProps =&gt; ({
    testList: state.myList,   // todo: define a type for the root state to have validation here
  });
  
  const dispatchToProps = {
    fetchTestLists,
    newTestList,
    displayTestList,
  };
  
  export default withRouter&lt;Props &amp; RouteComponentProps&lt;{}&gt;&gt;(connect&lt;StateProps, DispatchProps&gt;(
    mapStateToProps,
    dispatchToProps,
  )(MyTest) as any);
  </code></pre>
  
  <p>The component is used like this: <code>&lt;MyTest className={"active"} /&gt;</code></p>
  
  <p>I had to experiment a lot to get this working. For example:</p>
  
  <p>1) When I leave out the types for withRouter like this:
  <code>export default withRouter(connect...</code>
  Then I get <code>TS2339: Property 'className' does not exist on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Component&lt;Pick&lt;RouteComponentProps&lt;any&gt;, never&gt;, C...'.</code>
  This has somehow been suggested here: <a href="https://stackoverflow.com/questions/47649663/react-router-in-typescript-both-router-and-own-props">React router in TypeScript- both router and own props</a>, although I have no understanding of that concept.</p>
  
  <p>2) If you are wondering about the last line <code>as any</code>, this is related to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18999" rel="noreferrer">https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18999</a> and I'm getting this error without it: </p>
  
  <pre><code> TS2345: Argument of type 'ComponentClass&lt;Pick&lt;any, never&gt;&gt; &amp; { WrappedComponent: ComponentType&lt;any&gt;; }' is not assignable to parameter of type 'ComponentType&lt;Props &amp; RouteComponentProps&lt;{}&gt;&gt;'.
   Type 'ComponentClass&lt;Pick&lt;any, never&gt;&gt; &amp; { WrappedComponent: ComponentType&lt;any&gt;; }' is not assignable to type 'StatelessComponent&lt;Props &amp; RouteComponentProps&lt;{}&gt;&gt;'.
   Type 'ComponentClass&lt;Pick&lt;any, never&gt;&gt; &amp; { WrappedComponent: ComponentType&lt;any&gt;; }' provides no match for the signature '(props: Props &amp; RouteComponentProps&lt;{}&gt; &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'.
  </code></pre>
  
  <p>So is this the right way to do it? Where do you see issues? I am basically using all the latest versions, here is a snippet from my package.json:</p>
  
  <pre><code>"react": "^16.2.0",
  "redux": "^3.7.2",
  "react-dom": "^16.2.0",
  "react-redux": "^5.0.6",
  "react-router": "^4.2.0",
  "react-router-dom": "^4.2.2",
  "react-router-redux": "^4.0.8",
  ...
  "typescript": "^2.7.2",
  "@types/react-redux": "^5.0.15",
  "@types/react-router": "^4.0.22",
  "@types/react-router-dom": "^4.2.4",
  "@types/react": "^16.0.38",
  "@types/react-dom": "^16.0.4",
  </code></pre>