TypeScript equivalent of rest/spread props in React stateless component

Question

I am trying to add the following function, taken from bootstrap-react documentation, to my 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 versions < 2.1.

My current implementation is:

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 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?

See how babe transpiles rest/spread arguments. babeljs.io/repl/… — Red Mercury

James Monger James Monger · Accepted Answer · 2018-09-26T10:23:16

In TypeScript 3, your first example will work fine so you don't need to rewrite it into a class.

If you like, you can also use your FieldGroupProps interface as well as rewriting it into an arrow function.

const FieldGroup = ({ id, label, help, ...props }: FieldGroupProps) => <FormGroup controlId={id}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl {...props} />
    {help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>;

TypeScript equivalent of rest/spread props in React stateless component

1 Answers