Fix one or the other prop pattern example

[filiptammergard]

Fixes #618.

See TypeScript Playground.

Is there some more idiomatic way of achieving this?

[eps1lon]

I was confused by this as well. I though this just worked but it's not JSX related but also for normal functions as well (try MyComponent({ foo: string, bar: string }).

Could you check if there's an open TypeScript issue around this that we can link to?

[filiptammergard]

I was confused by this as well. I though this just worked but it's not JSX related but also for normal functions as well (try MyComponent({ foo: string, bar: string }).

Could you check if there's an open TypeScript issue around this that we can link to?

I looked around a bit, but couldn't find an issue or documentation describing this. But it makes sense, since TypeScript is a structural type system, you're describing minimal rather than exact requirements. For it to actually disallow one of them, a discriminating union is needed.

Added an explanation around it, and also an alternative using a discriminant prop.

[eps1lon]

Yeah I saw the exchange on twitter and it kinda makes sense why TS just gives up here.