title: TypeScript workaround for rest props in React
body: <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>