title: How can I implement a "as" prop with TypeScript while passing down the props?
body: <p>I am building a library of components and I need some of them to have a customizable tag name. For example, sometimes what looks like a <code>&lt;button&gt;</code> is actually a <code>&lt;a&gt;</code>. So I would like to be able to use the button component like so:</p>
  <pre><code>&lt;Button onClick={onClick}&gt;Click me!&lt;/Button&gt;
  &lt;Button as=&quot;a&quot; href=&quot;/some-url&quot;&gt;Click me!&lt;/Button&gt;
  </code></pre>
  <p>Ideally, I would like the available props to be inferred based on the &quot;as&quot; prop:</p>
  <pre><code>// Throws an error because the default value of &quot;as&quot; is &quot;button&quot;,
  // which doesn't accept the &quot;href&quot; attribute.
  &lt;Button href=&quot;/some-url&quot;&gt;Click me!&lt;Button&gt;
  </code></pre>
  <p>We might need to pass a custom component as well:</p>
  <pre><code>// Doesn't throw an error because RouterLink has a &quot;to&quot; prop
  &lt;Button as={RouterLink} to=&quot;/&quot;&gt;Click me!&lt;/Button&gt;
  </code></pre>
  <p>Here's the implementation, without TypeScript:</p>
  <pre><code>function Button({ as = &quot;button&quot;, children, ...props }) {
    return React.createElement(as, props, children);
  }
  </code></pre>
  <p>So, how can I implement a &quot;as&quot; prop with TypeScript while passing down the props?</p>
  <p>Note: I am basically trying to do what <code>styled-components</code> does. But we are using CSS modules and SCSS so I can't afford adding styled-components. I am open to simpler alternatives, though.</p>