带有react-dnd的TypeScript 2.0会出现错误"JSX元素属性可能不是联合类型"

Question

在TypeScript + React项目中,我使用的是react-dnd及其DefinitelyTyped类型:

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

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

export default DragDropContext(HTML5Backend)(ExampleScreen);

这将在另一个组件中呈现:

import ExampleScreen from "./ExampleScreen";

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

这适用于TS 1.8,没有任何错误.当我升级到TS 2.0时,我得到以下编译错误:

错误:(90,10)TS2600:JSX元素属性类型'(ExampleScreenProps&{children？:ReactNode;})| (ExampleScreenProps&{children ...'可能不是联合类型.

这是以下类型的定义DragDropContext:

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

我不能把它放在一起.抱怨的错误是什么？它似乎不喜欢联合ComponentClass<P> | StatelessComponent<P>,但那些不是元素属性,元素属性很简单<P>.我尝试明确传递<P>:

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

但同样的错误仍然存​​在.我可以通过声明输出来解决它:

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

但我不喜欢使用断言,我不明白实际问题,或者我做错了什么.这是一个可以解决的打字问题吗？

Answer 1

您可以使用以下命令安装新类型：

npm i @types/react-dnd --save-dev

如果您已经安装了其他类型，请使用以下命令将其删除：

typings uninstall --save --global react-dnd

之后它应该按预期工作。