TypeScript workaround for rest props in React
<h1>Updated for TypeScript 2.1</h1>

<p><a href="https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#object-spread-and-rest" rel="noreferrer">TypeScript 2.1 now supports object spread/rest</a>, so no workarounds are needed anymore!</p>

<hr>

<h2>Original Question</h2>

<p>TypeScript supports <a href="https://facebook.github.io/react/docs/jsx-spread.html" rel="noreferrer">JSX spread attributes</a> which is commonly used in React to pass HTML attributes from a component to a rendered HTML element:</p>

<pre><code>interface LinkProps extends React.HTMLAttributes {
  textToDisplay: string;
}

class Link extends React.Component&lt;LinkProps, {}&gt; {
  public render():JSX.Element {
    return (
      &lt;a {...this.props}&gt;{this.props.textToDisplay}&lt;/a&gt;
    );
  }
}

&lt;Link textToDisplay="Search" href="http://google.com" /&gt;
</code></pre>

<p>However, React introduced a <a href="https://facebook.github.io/react/warnings/unknown-prop.html" rel="noreferrer">warning if you pass any unknown props to an HTML element</a>. The above example would produce a React runtime warning that <code>textToDisplay</code> is an unknown prop of <code>&lt;a&gt;</code>. The suggested solution for a case like this example is to use <a href="https://github.com/sebmarkbage/ecmascript-rest-spread" rel="noreferrer">object rest properties</a> to extract out your custom props and use the rest for the JSX spread attributes:</p>

<pre><code>const {textToDisplay, ...htmlProps} = this.props;
return (
  &lt;a {...htmlProps}&gt;{textToDisplay}&lt;/a&gt;
);
</code></pre>

<p><s>But TypeScript does not yet support this syntax. I know that hopefully some day <a href="https://github.com/Microsoft/TypeScript/issues/4928" rel="noreferrer">we will be able to do this in TypeScript</a>.</s> (<strong><em>Update</strong>: <a href="https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#object-spread-and-rest" rel="noreferrer">TS 2.1 now supports object spread/rest</a>! Why are you still reading this??</em>) In the meantime what are some workarounds? I'm looking for a solution that doesn't compromise type-safety and finding it surprisingly difficult. For example I could do this:</p>

<pre><code>const customProps = ["textDoDisplay", "otherCustomProp", "etc"];
const htmlProps:HTMLAttributes = Object.assign({}, this.props);
customProps.forEach(prop =&gt; delete htmlProps[prop]);
</code></pre>

<p>But this requires the use of string property names that are not validated against the actual props and thus prone to typos and bad IDE support. Is there a better way we can do this?</p>