TypeScript、React 和 Gulp.js - 定义反应答案

【问题标题】：TypeScript, React and Gulp.js - defining reactTypeScript、React 和 Gulp.js - 定义反应
【发布时间】：2016-01-01 03:45:03
【问题描述】：

我正在尝试创建一个工作流，我可以在其中使用 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'));
});

有解决办法吗？还是我在这里遗漏了什么？

【问题讨论】：

标签： javascript reactjs typescript gulp

【解决方案1】：

好的，我找到了解决方案。首先通过tsd安装React全局定义：

tsd install react-global

这将在您的typings 目录中创建一个文件react-global.d.ts，您必须在根组件文件中引用该文件（路径是相对的，因此请根据您的需要进行调整）：

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

之后它编译没有错误。

【讨论】：

用typings代替tsd有没有类似的解决办法？

【解决方案2】：

我可以使用 typescript 编写反应模块并通过 gulp 自动编译为 js

强烈建议您不要使用全局模块。而是使用 --module commonjs 编译并拥抱 react / webpack / nodejs 生态系统。

您可以在此处查看示例应用程序：https://github.com/basarat/tsb/tree/master

【讨论】：

您好，感谢您的回答！我不应该这样做的原因是什么？这是为了防止我想加载我当时不需要的外部库并且必须通过脚本标签加载它们吗？
虽然我认为这个答案是正确的方法，但对我来说解释太少，无法从提到的示例应用程序中使用它。无论出于何种原因，我的模块在尝试从示例中复制样式时都引用了__React。
我在遵循这个建议时也遇到了问题，这主要是由于 __React 全局以及许多 react 包声明文件中的问题。 stackoverflow.com/questions/38441400/…