TypeScript，React和Gulp.js - 定義反應

我想製作一個工作流程，我可以使用TypeScript編寫React模塊，並通過Gulp.js自動編譯爲JavaScript。我正在使用TypeScript 1.6.2，gulp-react和gulp-typingcript。TypeScript，React和Gulp.js - 定義反應

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

是否有解決方法嗎？或者我在這裏錯過了什麼？

來源

2015-10-04 Felix Hagspiel

好的，我找到了解決方案。首先安裝通過tsd的陣營全局定義：

tsd install react-global

這將創建一個文件，react-global.d.ts，在你typings目錄中，您必須在您引用根組件文件（路徑是相對的，所以它調整到您的需求）：

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

之後它編譯沒有錯誤。

來源

2015-10-04 11:34:59

是否有使用'typings'，而不是'tsd'任何類似的解決方案？ – jpierson

在那裏我可以寫通過一飲而盡

強烈建議你不要使用全局模塊使用反應打字稿及自動編譯爲JS模塊。改爲使用--module commonjs進行編譯，並採用react/webpack/nodejs生態系統。

你可以在這裏籤一個示例應用程序：https://github.com/basarat/tsb/tree/master

來源

2015-10-05 01:08:15 basarat

嘿謝謝你的回答！我不應該這樣做的原因是什麼？這是爲了防止我想加載外部庫，我不能要求然後必須通過腳本標記加載它們嗎？ –

雖然我認爲這個答案是正確的選擇，但對於我能夠從上述示例應用程序中使用它的解釋太少。在嘗試從樣本中複製樣式時，無論出於何種原因，我的模塊都會引用'__React'。 –

我遇到了以下問題，主要是由於__React全局以及許多反應包聲明文件。 http://stackoverflow.com/questions/38441400/issues-installing-react-related-type-definitions-with-typings – jpierson

TypeScript，React和Gulp.js - 定義反應

回答

相關問題