Búsqueda de sitios web

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

En un proyecto de TypeScript + React estoy usando react-dnd con sus tipos de 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: El tipo de atributos del elemento JSX '(ExampleScreenProps & { children?: ReactNode; }) | (ExampleScreenProps & { children...}' puede no ser un tipo 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>, sin embargo, esos no son los atributos del elemento, los atributos del elemento son simplemente <P>. Intenté pasar explícitamente <P>:

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

Pero el mismo error permanece. Puedo solucionarlo temporalmente afirmando la salida:

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 este un problema con los tipos que se puede solucionar?

Respuesta #1

sin error de compilación con TypeScript 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",

Respuesta #2

Puedes instalar los nuevos tipos usando:

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

si ya instalaste otros tipos, elimínalos usando:

typings uninstall --save --global react-dnd

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

Artículos relacionados