17

在 TypeScript + React 项目中，我使用react-dnd和它的definiteTyped类型：

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>;

但我不喜欢使用断言，我不了解实际问题，或者我做错了什么。这是可以修复的打字问题吗？

4

2 回答 2

1

typescript 2.4.2
和使用的依赖项没有构建错误：

    "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",
于 2017-08-28T16:13:56.873 回答
0

您可以使用以下方法安装新类型：

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

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

typings uninstall --save --global react-dnd

之后它应该按预期工作。

于 2017-03-12T15:10:21.817 回答