title: Typescript: Generic Component Discriminating Between Different Input Props
body: <p>I have an enum with two members,</p>
  <pre><code>enum Step {
    ONE = &quot;StepOne&quot;,
    TWO = &quot;StepTwo&quot;
  }
  </code></pre>
  <p>each of which are assigned to a property, <code>step</code> in a discriminating union</p>
  <pre><code>type Props =
    | { type: Step.TWO; headline: string }
    | { type: Step.ONE; headline: string[] };
  </code></pre>
  <p>There is a generic component that takes props of either shape in the union and returns a matching component from a &quot;componentMap&quot;, object</p>
  <pre><code>const Component = &lt;T extends Step&gt;(props: Extract&lt;Props, { step: T }&gt;) =&gt; {
    const compMap = { StepOne, StepTwo };
  
    // This works but I don't want to need to cast Comp 
    // const Comp = compMap[props.type] as React.ComponentType&lt;any&gt;;
  
    const Comp = compMap[props.step];
  
    return &lt;Comp {...props} /&gt;;
  };
  </code></pre>
  <p>If I cast <code>compMap[props.step]</code> as <code>React.ComponentType&lt;any&gt;</code> (or as <code>React.FunctionComponent&lt;any&gt;</code> etc) I don't have a type error, but I'd like to not need to do this.</p>
  <p>The specific error I get when not casting <code>compMap[props.step]</code> is:</p>
  <pre><code>Type '{ step: T; } &amp; { step: Step.TWO; headline: string; }' has no properties in common with type 'IntrinsicAttributes'
  </code></pre>
  <p>So theres a mismatch happening somewhere...</p>
  <p>Is there a way to correctly type this <code>Component</code> function so that it can infer the appropriate component it is meant to return?</p>
  <p><a href="https://codesandbox.io/s/generic-component-issue-lvlj8?file=/src/App.tsx" rel="nofollow noreferrer">Here is a codesandbox with an example of the implementation for context</a></p>