title: Dynamically extending JSX.IntrinsicElements with custom props
body: <p>I'm developing a small library which wraps around react and adds some custom props to tthe existing react native ones.
  So it should create components with the types of the predefined CustomProps and these correspondig to the provided <code>type</code> combined.</p>
  <pre class="lang-tsx prettyprint-override"><code>type CustomProps = {
      foo?: boolean,
  };
  
  const Anchor = factory&lt;CustomProps&gt;({
      type: 'a',
  });
  </code></pre>
  <p>In this example, auto completion should suggest <code>foo</code> alongside <code>href</code>, <code>rel</code> and so on.</p>
  <p>This is what I've came up with:</p>
  <pre class="lang-tsx prettyprint-override"><code>type TypeList = keyof JSX.IntrinsicElements;
  type Factory = &lt;Props, Type extends TypeList = TypeList&gt;(
      {type}: Config&lt;Props, Type&gt;,
  ) =&gt; ForwardRefExoticComponent&lt;JSX.IntrinsicElements[Type] &amp; PropsWithChildren&lt;Props&gt;&gt;;
  
  type Config&lt;Props, Type&gt; = {
      type?: Type,
  }
  </code></pre>
  <p>Technically speaking, it does work as intended, but <code>JSX.IntrinsicElements[Type]</code> in combination with <code>PropsWithChildren&lt;Props&gt;</code> creates absurdly big type definitions for some types like <code>button</code> or <code>div</code>.
  rendering my IDE unresponsive sometimes.</p>
  <p>Is there a way to optimize this?</p>