TypeScript 2.0 with react-dnd gives error "JSX element attributes may not be a union type"

Question

In a TypeScript + React project I am using react-dnd with its DefinitelyTyped typings:

interface ExampleScreenProps { a, b, c }
interface ExampleScreenState { x, y, z }

class ExampleScreen extends React.Component<ExampleScreenProps, ExampleScreenState> { }

export default DragDropContext(HTML5Backend)(ExampleScreen);

This gets rendered in another component:

import ExampleScreen from "./ExampleScreen";

<ExampleScreen a="a" b="b" c="c" />

This works in TS 1.8 without any errors. When I upgraded to TS 2.0 I got the following compile error:

Error:(90, 10) TS2600: JSX element attributes type '(ExampleScreenProps & { children?: ReactNode; }) | (ExampleScreenProps & { children...' may not be a union type.

This is the type definition for DragDropContext:

export function DragDropContext<P>(
    backend: Backend
): <P>(componentClass: React.ComponentClass<P> | React.StatelessComponent<P>) => ContextComponentClass<P>;

I can't put this together. What is the error complaining about? It seems that it doesn't like the union of ComponentClass<P> | StatelessComponent<P>, yet those are not the element attributes, the element attributes are simply <P>. I tried explicitly passing <P>:

export default DragDropContext<ExampleProps>(HTML5Backend)(ExampleScreen);

But the same error remains. I can workaround it by asserting the output:

export default DragDropContext(HTML5Backend)(ExampleScreen) as React.ComponentClass<ExampleProps>;

But I don't like having to use an assertion and I don't understand the actual problem, or if I'm doing something wrong. Is this a problem with the typings that can be fixed?

Answer 1

no build error with typescript 2.4.2
and used dependencies:

    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-dnd":"^2.4.0"

    "@types/react": "^16.0.5",
    "@types/react-dom": "^15.0.0",
    "@types/react-dnd":"^2.0.33",