TypeScript，React和Gulp.js - 定义反应

Question

我想制作一个工作流程，我可以使用TypeScript编写React模块，并通过Gulp.js自动编译为JavaScript。我正在使用TypeScript 1.6.2，gulp-react和gulp-typingcript。

我.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 

这将创建一个文件，react-global.d.ts，在你typings目录中，您必须在您引用根组件文件（路径是相对的，所以它调整到您的需求）：

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

之后它编译没有错误。

Answer 2

在那里我可以写通过一饮而尽

强烈建议你不要使用全局模块使用反应打字稿及自动编译为JS模块。改为使用--module commonjs进行编译，并采用react/webpack/nodejs生态系统。

你可以在这里签一个示例应用程序：https://github.com/basarat/tsb/tree/master