title: Cannot use HOC property inside child component in Typescript
body: <h3>Problem</h3>
  
  <p>I've wrapped a component with a typical HOC that I've used in some format on other non-TS projects. My problem is that I can't use the HOC's prop <code>currentBreakpoint</code> inside of my wrapped component because it expects it to be in the component's type:</p>
  
  <pre class="lang-sh prettyprint-override"><code>Property 'currentBreakpoint' does not exist on type 'Readonly&lt;OwnProps&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt;'.  TS2339
  </code></pre>
  
  <p>So then I import the HOC's props interface and merge it into my component's own prop interface but then I get:</p>
  
  <pre class="lang-sh prettyprint-override"><code>Property 'currentBreakpoint' is missing in type '{}' but required in type 'Readonly&lt;Props&gt;'.  TS2741
  </code></pre>
  
  <p>As it expects the prop <code>currentBreakpoint</code> to be defined when I invoke <code>&lt;ChildComponent /&gt;</code> in my view – even though this is provided by the HOC.</p>
  
  <p>-</p>
  
  <p>Here are my files:</p>
  
  <ul>
  <li><code>react-scripts@3.0.1</code></li>
  <li><code>typescript@3.4.5</code></li>
  </ul>
  
  <p><strong><code>ChildComponent.js</code></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import withBreakpoints, {
    Breakpoints,
    Props as WithBreakpointsProps
  } from 'lib/withBreakpoints';
  
  interface OwnProps {}
  type Props = WithBreakpointsProps &amp; OwnProps;
  
  class ChildComponent extends Component&lt;Props&gt; {
    constructor(props: Props) {
      super(props);
  
      this.state = {
        daysPerPage: this.getDaysPerPageFromViewportSize(),
        cursor: new Date()
      };
    }
  
    getDaysPerPageFromViewportSize = () =&gt; {
      // the problem area
      const { currentBreakpoint } = this.props;
  
      let daysPerPage;
      switch (currentBreakpoint) {
        case Breakpoints.SMALL.label:
        case Breakpoints.EXTRA_SMALL.label:
          daysPerPage = 1;
          break;
        case Breakpoints.MEDIUM.label:
        case Breakpoints.LARGE.label:
          daysPerPage = 4;
          break;
        case Breakpoints.EXTRA_LARGE.label:
          daysPerPage = 6;
          break;
        default: 
          daysPerPage = 1;
          break;
      }
  
      return daysPerPage
    };
  
    render() {
      return (
        &lt;div className="AvailabilityCalendar" /&gt;
      );
    }
  }
  
  export default withBreakpoints&lt;Props&gt;(AvailabilityCalendar);
  </code></pre>
  
  <p><strong><code>withBreakpoints.ts</code></strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component, ComponentType } from 'react';
  
  export type CurrentBreakpoint = string | null;
  
  export interface Props {
    currentBreakpoint: string
  }
  
  export interface Breakpoint {
    label: string;
    lowerBound: number;
    upperBound: number;
  }
  
  export interface State {
    currentBreakpoint: CurrentBreakpoint;
  }
  
  export const Breakpoints: {
    [id: string]: Breakpoint
  } = {
    EXTRA_SMALL: {
      label: 'EXTRA_SMALL',
      lowerBound: 0,
      upperBound: 640
    },
    SMALL: {
      label: 'SMALL',
      lowerBound: 641,
      upperBound: 1024
    },
    MEDIUM: {
      label: 'MEDIUM',
      lowerBound: 1025,
      upperBound: 1280
    },
    LARGE: {
      label: 'LARGE',
      lowerBound: 1281,
      upperBound: 1920
    },
    EXTRA_LARGE: {
      label: 'EXTRA_LARGE',
      lowerBound: 1921,
      upperBound: 1000000
    }
  };
  
  const withBreakpoints = &lt;WrappedComponentProps extends object&gt;(
    WrappedComponent: ComponentType&lt;WrappedComponentProps&gt;
  ) =&gt; {
    class WithBreakpoints extends Component&lt;WrappedComponentProps, State&gt; {
      constructor(props: WrappedComponentProps) {
        super(props);
  
        this.state = {
          currentBreakpoint: this.getCurrentBreakpoint()
        };
      }
  
      componentDidMount() {
        window.addEventListener('resize', this.checkBreakpoints);
      }
  
      componentWillUnmount() {
        window.removeEventListener('resize', this.checkBreakpoints);
      }
  
      checkBreakpoints = () =&gt; {
        let currentBreakpoint: CurrentBreakpoint = this.getCurrentBreakpoint();
  
        if (currentBreakpoint !== this.state.currentBreakpoint) {
          this.setState({ currentBreakpoint });
        }
      };
  
      getCurrentBreakpoint = (): CurrentBreakpoint =&gt; {
        const currentViewportWidth: number = Math.round(window.innerWidth);
  
        return Object.keys(Breakpoints).find(
          key =&gt;
            Breakpoints[key].lowerBound &lt; currentViewportWidth &amp;&amp;
            Breakpoints[key].upperBound &gt; currentViewportWidth
        ) || null;
      };
  
      render() {
        return (
          &lt;WrappedComponent
            {...this.props as WrappedComponentProps}
            currentBreakpoint={this.state.currentBreakpoint}
          /&gt;
        );
      }
    }
  
    return WithBreakpoints;
  };
  
  export default withBreakpoints;
  </code></pre>
  
  <p>-</p>
  
  <h3>Response to "Make <code>currentBreakpoint</code> optional on the <code>ChildComponent</code>".</h3>
  
  <p>I have seen this as the accepted answer on other questions but I think we can all agree this is an inappropriate use of the optional flag on properties and defeats the purpose of using Typescript.</p>