Is it possible to effectively extend the HTMLProps type?

Question

What I would like to do is something along the lines of this:

MyButton.jsx

type Props = { foo?: 'x' | 'y' | 'z'; ...HTMLProps<HTMLButtonElement> };

const MyButton = ({ foo = 'y', ...props }: Props) => {
    return (
        <button class={foo} {...props}/>
    )
}

Application.jsx

...
render() {
    <MyButton
        onClick={() => this.setState({ bar: true })}
        foo="z" />
}
...

Unfortunately, this syntax for copying over all the contents of one type or interface into another doesn't exist.

The FlowType support for HTML properties is really useful and I don't want to copy them all over into my own props definition just so they can be passed down to a child element - instead, I just want to add a handful of my own properties to this list, pluck them off and send the remainder down the chain.

Answer 1

Unfortunately, you can't do this. There is an open issue on making this possible in the Flowtype repo.

A possible workaround would be to have one of your props be an object of type HTMLProps containing all the HTML properties you need, and have your other props be passed separately. However, that would be slightly cumbersome to deal with. You could also just not use Flow for this specific case and rely on React's PropTypes-based run-time validation, although this would also be more inconvenient.

tl;dr: Flow does not support extending types for the time being. The feature is requested, and commenting on the relevant issue might make it come out faster.