TypeScript doesn't correctly typecheck React/JSX union properties

[gcnew]

TypeScript Version: nightly (2.1.0-dev.20160805)

Code

import * as React from "react";
import * as ReactDOM from "react-dom";

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

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

ReactDOM.render(
    <TextComponent editable={true} />, // FAIL: should be an error, but it's not
                                       // `onEdit` is missing
    document.getElementById("example")
);

// OK: correctly issues an error
React.createElement(TextComponent, { editable: true as true });

Unfortunately, not only is the parameter presence not enforced, but also it cannot be provided even if the programmer somehow notices:

ReactDOM.render(
    // Property 'onEdit' does not exist on type ...
    <TextComponent editable={true} onEdit={ () => {} } />,
    document.getElementById("example")
);

Type-safe workaround:

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

ReactDOM.render(
    <TextComponent {...textProps} />,
    document.getElementById("example")
);

Expected behavior:
The compiler should check whether the provided property set in JSX syntax matches the expected one according to the normal typing rules.

PS: Is there a way to see the desugarred TS?

[DanielRosenwasser]

true might not be getting contextually typed appropriately.

[DanielRosenwasser]

Actually I don't think this is unique to discriminated unions or literal types.

[yuit]

The reason this is allowed:

ReactDOM.render(
    <TextComponent editable={true} />, // FAIL: should be an error, but it's not
                                       // `onEdit` is missing
    document.getElementById("example")
);

is that editable has type boolean while below editable has literal type of true as you cast it so

// OK: correctly issues an error
React.createElement(TextComponent, { editable: true as true }); 

Talk with @RyanCavanaugh offline, we should treat JSX attribute/property as literal type. However, this will be quite a big change so I will push it into the next release of 2.1.