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安装React全局定义：

tsd install react-global

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

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

之后编译没有错误。

Answer 2

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

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

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

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

2 个答案: