web-dev-qa-db-fra.com

L'argument de type 'Element' n'est pas assignable au paramètre de type 'ReactElement <any>

Ce code:

import * as React from 'react';                                                                                              

const Component = () => <div/>;                                                  

function culprit<P>(node: React.ReactElement<P>) {
  console.log(node);
}

culprit(<Component/>);

... produit cette erreur de compilation lors de la compilation avec TypeScript:

error TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
  Type 'null' is not assignable to type 'ReactElement<any>

Cela se produit uniquement lorsque l'indicateur de compilation strictNullChecks TypeScript est défini sur true.

Oui, je pourrais désactiver cet indicateur, mais je le souhaite pour une vérification/sécurité supplémentaire lors de la compilation.

Si je change la dernière ligne en ceci:

culprit( (<Component/> as React.ReactElement<any>) );

... cela fonctionne avec l'indicateur défini sur true.

J'ai récemment essayé de migrer de JavaScript "ordinaire" vers TypeScript dans un projet React et cela déclenche tous mes tests, donc en ajoutant toutes les assertions de type TypeScript à toutes ces occurrences dans le code de test sera une douleur.

Est-ce un bug ou n'ai-je pas d'autre choix?

javascriptreactjstypescript
11
pleasedesktop

C'est apparemment un problème qui a été introduit dans les définitions de type 15.0.5 React. Si vous passez à 15.0.4, tout devrait bien se passer.

Voir ce problème: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/14284

9
Morten Christiansen

Pour moi, le problème était autre chose que j'ai identifié après avoir eu du mal.

Si votre JSX à l'intérieur de votre composant ou fichier de test de composant doit avoir l'extension .tsx. Mon test ou code était en cours de compilation car je le gardais en tant que fichier .ts.

Veuillez également noter que j'utilisais TypeScript c'est pourquoi je l'ai renommé en .tsx au cas où vous utilisez ES6 le renommer en .jsx

3
TARJU