reactjs - 在 Visual Studio 2015 TSX 文件中显示 Hello World（React.js 和 TypeScript）

我刚接触 React.js 和 TypeScript，正在尝试让一个简单的 Hello World 示例运行。我将 react-d.ts 和 react-dom.d.ts 添加到了我的 Typings 文件夹中。当我在调试模式下运行网站时，TypeScript 文件的第一行出现 “require is not defined”。我该如何定义它？

--------- index.html 文件: --------------

<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>TypeScript Test</title>

   <!-- References. -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
   <h1>Before React Output</h1>
   <div id="content"></div>

   <script src="Test.js" type="text/javascript"></script>
</body>
</html>

----------- Test.tsx 文件：-----------------

import React = require('react');
import ReactDOM = require('react-dom');

interface MyProps {
   name: string;
}

class HelloWorld extends React.Component<MyProps, {}> {
   constructor(props: MyProps) {
      super(props);
   }
   render() {
      return (<div> Hello {this.props.name} </div>);
   }
}

ReactDOM.render(<HelloWorld name="World" />,  document.getElementById('content'));

这是我的 TypeScript 设置：

答案＃1

我通过将 react-globals.d.ts TypeScript 定义文件添加到我的 VS 项目中，成功使这段代码工作，但我还必须删除那两行“import React='react';”。我猜当我没有将所有内容打包成一个 JavaScript 文件时，对于外部模块并不需要使用 CommonJS 导入语法。

如果我使用 Gulp 和 Browserify 创建一个包含所有 JavaScript 文件的 bundle.js，我也可以让项目工作。也许这是更好的方法，因为我不必使用 React 的 script 标签，但它仍然可以工作。

这个方法的问题是我不知道如何在单独的 TypeScript 文件中设置断点。我只能在巨大的打包 JavaScript 文件中设置调试断点。我最终放弃了，并联系了微软，希望弄清楚如何让所有这些新技术协同工作。天哪，查理布朗！

微软回复我说 TypeScript 1.8 版本（测试版）将解决所有这些打包问题。我想这意味着在 Visual Studio 中打包时不再需要 Gulp 和 Browserify 了。