TypeScript、React、Gulp.js - reactを定義する

Question

ワークフローを作成しようとしています。TypeScriptを使用してReactモジュールを作成し、Gulp.js経由でJavaScriptに自動コンパイルすることができます。私はTypeScript 1.6.2、gulp-reactとgulp-typescriptを使用しています。

マイ.tsxファイル次のようになります。

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

私の問題は、この行です：import React = __React;

私はそれを除外すると、私はエラー

エラーTS2304を取得：することはできません「React」という名前を見つけてください。

.tsxを.jsにコンパイルすると（しかし、まだJSXにコンパイルされ、出力を使用できます）。私はそれを置くと、私はエラーなしでコンパイルすることができますが、私はブラウザ内でファイルを使用しようとすると、私はもちろんUncaught ReferenceError: __React is not definedを取得します。

これは私のgulptaskがどのように見えるかです：

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

は、このための回避策はありますか？または私はここに何かを逃していますか？

Answer 1

私は解決策を見つけました。まずtsdを介してグローバルな定義を反応させるのインストール：

tsd install react-global 

これは、あなたがあなたの中にルートコンポーネントファイルを参照する必要があなたのtypingsディレクトリに、ファイル、react-global.d.tsを作成します（パスが相対的であるので、それを調整し、あなたのニーズ：

その後、エラーなしでコンパイルされます。私は書くことができます

Answer 2

一気

を経てJSにtypescriptですし、自動コンパイルを使用して、モジュールは非常にあなたがグローバルモジュールを使用しないことをお勧めします反応します。代わりに--module commonjsでコンパイルし、react/webpack/nodejsエコシステムを採用してください。

あなたはここにサンプルアプリケーションをチェックアウトすることができます： `typings`の代わりに、` tsd`を使用した場合https://github.com/basarat/tsb/tree/master