title: A typescript type that allows any html attribute
body: <p>I', trying to create a react component which emulates a native html element.</p>
  <h1>Problem 1:</h1>
  <p>Allowing a valid html attribute</p>
  <p>Example:</p>
  <pre class="lang-js prettyprint-override"><code>type TAtt = {
    [key: string]: React.HTMLAttributes&lt;HTMLElement&gt;;
  };
  
  const NavAnyValidAttribute: React.FC&lt;TAtt&gt; = props =&gt; {
    const { children, ...therest } = props;
    return &lt;nav {...therest}&gt;{children}&lt;/nav&gt;;
  };
  
  &lt;NavAnyValidAttribute className=&quot;x&quot;&gt;some children&lt;/NavAnyValidAttribute&gt;;
  </code></pre>
  <h1>Error</h1>
  <blockquote>
  <p>Type 'string' has no properties in common with type 'HTMLAttributes'.(2559)
  input.tsx(135, 3): The expected type comes from this index signature.</p>
  </blockquote>
  <h1>Problem 2:</h1>
  <pre class="lang-js prettyprint-override"><code>type TProps = TAtt &amp; {
    TagName: string; //keyof JSX.IntrinsicElements - also doesn't work!;
  }
  
  const Tag: React.FC&lt;TProps&gt; = ({ TagName, children, ...props }) =&gt;
    React.createElement(TagName, props, children);
  
  const Nav = &lt;Tag {...{ TagName: 'nav' }} /&gt;;
  </code></pre>
  <blockquote>
  <p>Error: Type '{ TagName: string; }' is not assignable to type 'TAtt'.
  Property 'TagName' is incompatible with index signature.
  Type 'string' has no properties in common with type 'HTMLAttributes'.ts(2322)</p>
  </blockquote>
  <p>Any help appreciated.
  thanks</p>