title: Type error in connected container component
body: <p>I'm converting a React app to TypeScript, and my app container component contains these container components:</p>
  
  <h3><code>App.tsx</code></h3>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;AppContainer&gt;
          &lt;HeaderContainer /&gt;
          &lt;TabContainer /&gt;
          &lt;ViewContainer /&gt;
        &lt;/AppContainer&gt;
      )
    }
  }
  
  export default App
  </code></pre>
  
  <h3><code>HeaderContainer.tsx</code></h3>
  
  <pre><code>const mapStateToProps = (state: AppState) =&gt; ({version: state.settings.version})
  
  const mapDispatchToProps = () =&gt; ({})
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(Header)
  </code></pre>
  
  <h3><code>Header.tsx</code></h3>
  
  <pre><code>const HeaderContainer = styled('header')({
      flex: '0 0 auto',
      flexDirection: 'row-reverse',
  });
  const HeaderRow = styled('div')({
      padding: '10px 0px 0px 0px',
      display: 'flex',
      flexDirection: 'row-reverse',
      justifyContent: 'right',
      maxHeight: '100px',
  });
  
  const HeaderLogo = styled('img')({
      margin: '0px 5px',
      height: '80px',
      width: '80px',
      display: 'flex',
      order: 1,
  });
  
  const HeaderInfo = styled('div')({
      margin: '0px 15px 0px 10px',
      display: 'flex',
      justifyContent: 'flex-start',
      flexDirection: 'column',
      order: 0,
  });
  
  const HeaderName = styled('div')({
      display: 'flex',
      marginTop: '7px',
      flexGrow: 1,
      order: 0,
      fontSize: '40px',
  });
  
  const HeaderVersion = styled('div')({
      display: 'flex',
      flexGrow: 1,
      order: 1,
      fontSize: '20px',
  });
  const Header = ({ version }) =&gt; (
    &lt;HeaderContainer&gt;
      &lt;Disclaimer /&gt;
      &lt;HeaderRow&gt;
          &lt;HeaderLogo src={process.env.PUBLIC_URL + "/icons/icon-512x512.png"} alt="logo" /&gt;
          &lt;HeaderInfo&gt;
              &lt;HeaderName&gt;App Name&lt;/HeaderName&gt;
              &lt;HeaderVersion&gt;{version}&lt;/HeaderVersion&gt;
          &lt;/HeaderInfo&gt;
      &lt;/HeaderRow&gt;
    &lt;/HeaderContainer&gt;
  )
  
  Header.propTypes = {
    version: PropTypes.string.isRequired,
  }
  
  export default Header
  </code></pre>
  
  <p>I'm getting a type error on <code>HeaderContainer</code> in <code>App.tsx</code>: </p>
  
  <p><code>Type error: Property 'version' is missing in type '{}' but required in type 'Pick&lt;InferProps&lt;{ version: Validator&lt;string&gt;; }&gt;, "version"&gt;'.</code></p>
  
  <p>I do basically understand what this is saying. However, I don't get why the error is showing up on <code>HeaderContainer</code> and not in <code>Header</code>, and I don't get why the error is showing up at all because <code>Header</code> is only being implemented inside of the <code>connect</code> function in the container, passing it the required prop.</p>
  
  <p>Commenting out the <code>propTypes</code> in <code>Header</code> silences the error.</p>