TypeScript doesn't correctly infer union types as React/JSX properties

[junseld]

Hey,

typescript version: 2.5.3

My problem is really close to this issue's, although the main problem of it was fixed:
#10171
so I take this issue's example:

type TextProps = { editable: false }
               | { editable: true, onEdit: (newText: string) => void }

class TextComponent extends React.Component<TextProps, {}> {
    render() {
        return <span>Some Text..</span>;
    }
}

I can't use the props in JSX, while it works with directly using React.createElement:

const textProps: TextProps = {
    editable: true as true,  // Whoops, why not literal type?
    onEdit: () => {}
} as any;

<TextComponent {...textProps} /> // fails
React.createElement(Button, textProps) // works

// or
function id(t: TextProps): TextProps { return t; }
const textProps2: TextProps = id(textProps);

<TextComponent {...textProps2} />, // fails
React.createElement(Button, textProps2) // works

Any clue why or how to fix/workaround that?

Thanks

[mhegazy]

Duplicate of #18670