title: How to fix TypeScript React props types when passing components as variables?
body: <p>I am passing React components as variables and trying to protect myself from runtime errors with correct types. The problem is that when I need to instantiate component from variable, the prop-types feels 'inverted'. The following snippet will better illustrate problem.</p>
  
  <p>And also the solution I found - wrapping component with functional component, that just passes props through</p>
  
  <pre><code>interface IBaseStore {
    prop: number;
  }
  interface IExtendedStore extends IBaseStore {
    extraProp: number;
  }
  type ComponentProps&lt;StoreT&gt; = {
    store: StoreT;
  };
  const BaseComponent = (props: ComponentProps&lt;IBaseStore&gt;) =&gt; &lt;div&gt;{props.store.prop}&lt;/div&gt;;
  const ExtendedComponent = (props: ComponentProps&lt;IExtendedStore&gt;) =&gt; &lt;div&gt;{props.store.extraProp}&lt;/div&gt;;
  
  type ConfigProps&lt;StoreT&gt; = {
    additionalLayer: ComponentType&lt;ComponentProps&lt;StoreT&gt;&gt;;
  };
  const tableConfigCorrect1: ConfigProps&lt;IBaseStore&gt; = {
    additionalLayer: BaseComponent,
  };
  const tableConfigCorrect2: ConfigProps&lt;IExtendedStore&gt; = {
    additionalLayer: BaseComponent,
  };
  
  const tableConfigWrongType1: ConfigProps&lt;IBaseStore&gt; = {
    additionalLayer: ExtendedComponent, // No TS error
  };
  const runtimeError = &lt;tableConfigWrongType1.additionalLayer store={{ prop: 5 }}/&gt;;
  // Solution:
  const tableConfigWrongType2: ConfigProps&lt;IBaseStore&gt; = {
    additionalLayer: props =&gt; &lt;ExtendedComponent {...props}/&gt;, // TS error, not compiled
  };
  </code></pre>
  
  <p>Feels like its kind of common OOP problem with 'inverted' subtypes and Im looking for some pattern or TS typing to solve it in cleaner way</p>