title: Strongly typing the react-redux connect with typescript
body: <p>I am getting an error trying to type the parameters for my react component. I would like to stronly type what properties will be on the props and state of a component, but when I do so using Redux, I am getting an error when I pass mapStateToProps to the connect function.</p>
  
  <p>This is the component code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  
  import FileExplorer from '../components/file-explorer/file-explorer';
  import { ISideMenu, ISideMenuState } from '../models/interfaces/side-menu';
  
      class SideMenu extends Component&lt;ISideMenu, ISideMenuState&gt; {
          render() {
              return (
                  &lt;div&gt;
                      {this.props.fileExplorerInfo !== null &amp;&amp;
                          &lt;FileExplorer fileExplorerDirectory={this.props.fileExplorerInfo.fileExplorerDirectory}/&gt;
                      }
                  &lt;/div&gt;
              );
          }
      }
  
      const mapStateToProps = (state: ISideMenuState) =&gt; {
          return {
              fileExplorerInfo: state.fileExplorer
          };
      };
  
      export default connect&lt;ISideMenu, null, ISideMenuState&gt;(mapStateToProps)(SideMenu);
  </code></pre>
  
  <p>So the error occurs on this line:</p>
  
  <pre><code>export default connect&lt;ISideMenu, null, ISideMenuState&gt;(mapStateToProps)(SideMenu);
  </code></pre>
  
  <p>and when I hover over the word "mapStateToProps" in that line I am seeing the error:</p>
  
  <pre><code>Argument of type '(state: ISideMenuState) =&gt; { fileExplorerInfo: FileDirectoryTree | null; }'
  is not assignable to parameter of type 'MapStateToPropsParam&lt;ISideMenu, ISideMenuState, {}&gt;'.
    Type '(state: ISideMenuState) =&gt; { fileExplorerInfo: FileDirectoryTree | null; }' is not
  assignable to type 'MapStateToProps&lt;ISideMenu, ISideMenuState, {}&gt;'.
      Types of parameters 'state' and 'state' are incompatible.
        Type '{}' is not
  assignable to type 'ISideMenuState'.
          Property 'fileExplorer' is missing in type '{}'.
  </code></pre>
  
  <p>And these are the two interfaces I am using in the react component:</p>
  
  <pre><code>export interface ISideMenu {
      fileExplorerInfo: FileExplorerReducerState | null;
  }
  
  export interface ISideMenuState {
      fileExplorer: FileDirectoryTree | null;
  }
  </code></pre>
  
  <p>Any insight into this error will be greatly appreciated!</p>