reactjs - TypeScript 2.0 con react-dnd da error "Los atributos del elemento JSX pueden no ser un tipo de unión"

typescript-typings

Question

En un proyecto de TypeScript + React, estoy usando react-dnd con sus tipificaciones DefinitelyTyped :

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

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

export default DragDropContext(HTML5Backend)(ExampleScreen);

Esto se representa en otro componente:

import ExampleScreen from "./ExampleScreen";

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

Esto funciona en TS 1.8 sin ningún error. Cuando actualicé a TS 2.0 obtuve el siguiente error de compilación:

Error: (90, 10) TS2600: atributos del elemento JSX tipo ''(ExampleScreenProps & {children ?: ReactNode;}) | (ExampleScreenProps & {children ... ''puede no ser un tipo de unión.

Esta es la definición de tipo para DragDropContext :

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

No puedo armar esto. ¿De qué se queja el error? Parece que no le gusta la unión de ComponentClass<P> | StatelessComponent<P> ComponentClass<P> | StatelessComponent<P> , sin embargo, esos no son los atributos del elemento, los atributos del elemento son simplemente <P> . Intenté pasar <P> explícitamente:

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

Pero el mismo error permanece. Puedo solucionarlo afirmando el resultado:

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

Pero no me gusta tener que usar una afirmación y no entiendo el problema real, o si estoy haciendo algo mal. ¿Es esto un problema con los typings que se pueden arreglar?

Answer 1

Puede instalar los nuevos typings usando:

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

si ya instalas otras tipificaciones, quítala usando:

typings uninstall --save --global react-dnd

Después de eso, debería funcionar como se esperaba.

Answer 2

sin error de compilación con mecanografiado 2.4.2
y dependencias usadas:

    "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",