Impossible d'importer React JSX à partir d'un fichier distinct lors de l'utilisation de Typescript

Question

Le problème est similaire à How to properly import React JSX from separate file in Typescript 1.6.

Fonctionne correctement lorsque tout le code est dans un seul fichier. Mais quand je mets le composant dans un fichier différent et essaye d'importer, le compilateur de typecript donne l'erreur.

Le code semble correct.

erreur que je reçois est

type d'élément JSX 'Bonjour' n'a pas de construction ou appelez signatures.

app.tsx

/// <reference path="typings/tsd.d.ts" /> 
import React = require('react'); 
import ReactDOM = require('react-dom'); 
import $ = require('jquery'); 
import Hello = require('./components/Hello'); 

$(()=>{ 
    ReactDOM.render(<Hello name="Tom" />,document.body); 
}); 

composants/Hello.tsx

/// <reference path="../typings/tsd.d.ts" /> 
import React = require('react'); 

export default class Hello extends React.Component<any,any>{ 
    render(){ 
     return <div className="hello">Hello {this.props.name} !</div>; 
    } 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "jsx": "react" 
    } 
} 

Answer 1

Si vous avez écrit ces lignes

export default class Hello ... 
/* and */  
import Hello = require('./components/Hello'); 

Ensuite, vous devez écrire ceci pour consommer:

<Hello.Hello name="Tom" /> 

Vous pourriez plutôt écrire cela, changer le module d'exporter la classe comme son haut niveau objet:

class Hello ... 
export = Hello 

ou vous pourriez importer l'exportation Hello à partir du module avec une destructuration :

import { Hello } from './components/Hello'; 

ou vous pourriez importer le par défaut exportation à partir du module:

import Hello from './components/Hello';