title: Generics with Higher Order Function
body: <p>I want to create a function that returns a constructor function for one of my existing <code>React</code>
  components. The return value is a customized class extension of the passed-in function component.</p>
  
  <p>With other words:</p>
  
  <p>The return value of my higher-order function <code>withObservableStream()</code> - it returns another
  function - takes an existing <code>React</code> component (which has typed props) and returns a constructor function of a new one
  which should be eventually rendered into the <code>DOM</code>. Since I am only extending the passed in component with
  an <code>RxJS</code> subscription both components will share identical props.</p>
  
  <p>The type system should:</p>
  
  <ul>
  <li>Complain about a property mismatch</li>
  </ul>
  
  <p>How can I achieve that - who can show me the magic of 'genericism'? Is this possible?</p>
  
  <pre><code>type Props = Triggers &amp; InitialState;
  
  function App(props: Props) {
    return &lt;button
    onClick={(event) =&gt; {
      props.onClick(event);
    }}
    &gt;{props.text} (state: {props.counterX})&lt;/button&gt;;
  }
  
  // still all good here:
  const appInstance = App({...triggers, text: "init", counterX: -1});
  
  const WrappedApp = withObservableStream(
    interval(5000).pipe(
      map((o) =&gt; ({counterX: o})),
    ),
    {...triggers},
    {
      // counterX: -1,
      text: "XXX",
    },
  )(App);
  // type sytem should complain meaningful here:
  // 2nd &amp; 3rd parameter of observableStream() should match the constructor signature of App (type Props)
  // for both new WrappedApp(...) and render(&lt;WrappedApp...)
  </code></pre>
  
  <p>Full code sample on <a href="https://stackblitz.com/edit/react-ts-wdprr6?file=index.tsx" rel="nofollow noreferrer">stackblitz</a>.</p>