title: TypeScript equivalent of rest/spread props in React stateless component
body: <p>I am trying to add the following function, taken from <code>bootstrap-react</code> <a href="https://react-bootstrap.github.io/components.html#forms-controls" rel="noreferrer">documentation</a>, to my TypeScript + React project:</p>
  
  <pre><code>function FieldGroup({ id, label, help, ...props }) {
      return (
          &lt;FormGroup controlId={id}&gt;
              &lt;ControlLabel&gt;{label}&lt;/ControlLabel&gt;
              &lt;FormControl {...props} /&gt;
              {help &amp;&amp; &lt;HelpBlock&gt;{help}&lt;/HelpBlock&gt;}
          &lt;/FormGroup&gt;
      );
  }
  </code></pre>
  
  <p>However the rest/spread properties for ECMAScript 6 used as arguments are not supported by TypeScript versions &lt; 2.1. </p>
  
  <p>My current implementation is:</p>
  
  <pre><code>interface FieldGroupProps extends React.HTMLAttributes {
      id?: string;
      label?: string;
      help?: string;
  }
  
  class FieldGroup extends React.Component&lt;FieldGroupProps, {}&gt; {
      public render(): JSX.Element {
          const rest = objectWithout(this.props, ["id", "label", "help"]);
          return (
              &lt;FormGroup controlId={this.props.id}&gt;
                  &lt;ControlLabel&gt;{this.props.label}&lt;/ControlLabel&gt;
                  &lt;FormControl {...rest} /&gt;
                  {this.props.help &amp;&amp; &lt;HelpBlock&gt;{this.props.help}&lt;/HelpBlock&gt;}
              &lt;/FormGroup&gt;
          );
      }
  }
  </code></pre>
  
  <p>Is this functionally (not from a performance perspective) equivalent to the ECMAScript 6 version? If I missed something or it could be made more elegant, what is the recommended way to translate the use of the above rest/spread syntax? </p>