TypeScript, React und Gulp.js - defining react

Question

Ich versuche einen Workflow zu erstellen, in dem ich React-Module mit TypeScript schreiben und automatisch über Gulp.js in JavaScript übersetzen kann. Ich verwende TypeScript 1.6.2, gulp-react und gulp-typescript.

Meine .tsx Datei wie folgt aussieht jetzt:

/// <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')); 

Mein Problem ist diese Linie: import React = __React;

Als ich es auslassen, erhalte ich die Fehler

TS2304 Fehler: Can not Suche nach dem Namen "React".

beim Kompilieren .tsx zu .js (aber es kompiliert immer noch zu JSX, und ich kann die Ausgabe verwenden). Wenn ich es einfüge, kann ich ohne Fehler kompilieren, aber wenn ich versuche, die Datei im Browser zu verwenden, bekomme ich natürlich eine Uncaught ReferenceError: __React is not defined. Diese

ist, wie mein gulptask aussieht:

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')); 
}); 

Gibt es eine Abhilfe für dieses? Oder verpasse ich hier etwas?

Answer 1

Okay, ich habe eine Lösung gefunden. Installieren Sie zuerst die globale Definition Reagieren über tsd:

tsd install react-global 

Dies wird eine Datei, react-global.d.ts, in Ihrem typings Verzeichnis erstellen, die Sie in Sie Root-Komponentendatei verweisen haben (der Pfad ist relativ, so passen sie an Ihre Bedürfnisse):

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

Danach kompiliert es ohne Fehler.

Answer 2

wo ich Module Typoskript und automatische Erstellung zu js über schluck

Sehr zu empfehlen verwenden Sie keine globalen Modulen reagieren schreiben können. Kompilieren Sie stattdessen mit --module commonjs und umarmen Sie das react/webpack/nodejs-Ökosystem.

Sie können eine Beispielanwendung hier Kasse: https://github.com/basarat/tsb/tree/master