title: Use react-redux connect in typescript
body: <p>I try to build a react app in typescript using redux and react-router-dom. I ran into typing issues when I added redux to my app. Thus I created the following minimal example with only one page <em>test-page</em>:</p>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>import * as React from 'react';
  import { Route, Redirect } from 'react-router-dom'
  import Test from './containers/test-page'
  import './App.css';
  
  class App extends React.Component {
    render() {
      return (
        &lt;div className="ui container" id="main"&gt;
          &lt;Route exact path="/" render={() =&gt; &lt;Redirect to="/test" /&gt;}/&gt;
          &lt;Route exact path="/test" component={Test} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The container for the test page looks like this. It produces a typing error in the call to <em>connect</em>.</p>
  
  <p><strong>containers/test-page/index.tsx</strong></p>
  
  <pre><code>import { Dispatch } from 'redux'
  import { connect } from 'react-redux'
  import TestPage from './test-page'
  
  function mapDispatchToProps(dispatch: Dispatch&lt;any&gt;) {
    return dispatch({ type: 'ALERT_USER' });
  }
  
  function mapStateToProps(state: any) {
    return { label: 'my test label' }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(TestPage)
  </code></pre>
  
  <p>The container uses the following react component, which in production should render a page for the router. It produces two errors, see below.</p>
  
  <p><strong>containers/test-page/test-page.tsx</strong></p>
  
  <pre><code>import * as React from 'react';
  
  export namespace Test {
    export interface Props {
      alert: () =&gt; void;
      label: string;
    }
  
    export interface State {
    }
  }
  
  export default class TestPage extends React.Component {
  
    constructor(props?: Test.Props, state?: Test.State, context?: any) {
      super(props, context);
    }
  
    sendAlert = () =&gt; {
        this.props.alert()
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
          &lt;button onClick={this.sendAlert}&gt;{this.props.label}&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <h2>Error messages:</h2>
  
  <pre><code>proxyConsole.js:54 ./src/containers/test-page/test-page.tsx
  (20,18): error TS2339: Property 'alert' does not exist on type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;{}&gt;'.
  
  proxyConsole.js:54 ./src/containers/test-page/test-page.tsx
  (27,54): error TS2339: Property 'label' does not exist on type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;{}&gt;'.
  
  proxyConsole.js:54 ./src/containers/test-page/index.tsx
  (16,3): error TS2345: Argument of type 'typeof TestPage' is not assignable to parameter of type 'ComponentType&lt;{ label: string; } &amp; { type: string; }&gt;'.
    Type 'typeof TestPage' is not assignable to type 'StatelessComponent&lt;{ label: string; } &amp; { type: string; }&gt;'.
      Type 'typeof TestPage' provides no match for the signature '(props: { label: string; } &amp; { type: string; } &amp; { children?: ReactNode; }, context?: any): ReactElement&lt;any&gt; | null'.
  </code></pre>
  
  <p>I tried to follow different guides and looked up example implementations but could not solve these issues. I do not understand the error messages of the typescript compiler:</p>
  
  <ul>
  <li>Why do my properties not exist on <code>this.props</code> when I defined them?</li>
  <li>What exactly is not assignable in connect?</li>
  </ul>