I am trying to add the following function, taken from the bootstrap-react documentation , to a TypeScript + React project:
function FieldGroup({ id, label, help, ...props }) { return ( <FormGroup controlId={id}> <ControlLabel>{label}</ControlLabel> <FormControl {...props} /> {help && <HelpBlock>{help}</HelpBlock>} </FormGroup> ); }
However, the rest / spread properties for ECMAScript 6, used as arguments, are not supported by TypeScript 2.1.
My current implementation:
interface FieldGroupProps extends React.HTMLAttributes { id?: string; label?: string; help?: string; } class FieldGroup extends React.Component<FieldGroupProps, {}> { public render(): JSX.Element { const rest = objectWithout(this.props, ["id", "label", "help"]); return ( <FormGroup controlId={this.props.id}> <ControlLabel>{this.props.label}</ControlLabel> <FormControl {...rest} /> {this.props.help && <HelpBlock>{this.props.help}</HelpBlock>} </FormGroup> ); } }
Is this functionally (not in terms of performance) equivalent to ECMAScript 6? If I missed something or it could be made more elegant, what is the recommended way to translate the use of the above rest / propagation syntax?
source share