TypeScript, React e Gulp.js - definizione della reazione

Question

Sto cercando di creare un flusso di lavoro, in cui posso scrivere moduli React utilizzando TypeScript e la compilazione automatica su JavaScript tramite Gulp.js. Sto usando TypeScript 1.6.2, gulp-react e gulp-typescript.

Il mio file .tsx assomiglia a questo ora:

/// <reference path="../../../../typings/react/react.d.ts" /> 
import React = __React; 
interface HelloWorldProps { 
    name: string; 
} 

var HelloMessage = React.createClass<HelloWorldProps, any>({ 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
}); 
React.render(<HelloMessage name="helloooo" />, document.getElementById('test')); 

Il mio problema è questa linea: import React = __React;

Quando esco fuori, ottengo l'errore

errore TS2304: Impossibile trova il nome 'React'.

durante la compilazione di .tsx a .js (ma ancora compila su JSX e posso usare l'output). Quando lo metto in, posso compilare senza errori, ma quando provo a usare il file all'interno del browser, ottengo uno Uncaught ReferenceError: __React is not defined, ovviamente.

Ecco come il mio gulptask assomiglia:

gulp.task('gui-tsx', function() { 
    var tsResult = gulp.src(config.guiSrcPath + 'tsx/app.tsx') 
     .pipe(ts({ 
      jsx: 'react' 
     })); 
    return tsResult.js.pipe(gulp.dest(config.guiSrcPath + 'jsx')); 
}); 

Esiste una soluzione per questo? O mi sto perdendo qualcosa qui?

Answer 1

Ok, ho trovato una soluzione. In primo luogo installare la definizione globale Reagire via tsd:

tsd install react-global 

Questo creerà un file, react-global.d.ts, nella typings directory, che si deve fare riferimento in voi file di componente principale (il percorso è relativo, in modo da regolare al vostro esigenze):

/// <reference path="../../../../typings/react/react-global.d.ts" /> 

Dopo che si compila senza errori.

Answer 2

dove posso scrivere reagire moduli usando dattiloscritto e compilazione automatica per js via sorso

Consiglio vivamente di non utilizzare i moduli globali. Piuttosto compilare con --module commonjs e abbracciare l'ecosistema react/webpack/nodejs.

è possibile verifica un esempio di applicazione qui: https://github.com/basarat/tsb/tree/master