Visual Studio 2015 TSX文件中的Hello World（React.js和TypeScript）

我是React.js和TypeScript的新手，我试图获得一个简单的Hello World示例。我在我的Typings文件夹中添加了react-d.ts，react-dom.d.ts。当我在调试模式下运行站点时，我在打字稿文件的第一行得到“require is not defined”。我如何定义这个？Visual Studio 2015 TSX文件中的Hello World（React.js和TypeScript）

--------- 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'));

这里是我的打字稿设置：

来源

2015-12-04 Lambert

我能得到这个代码工作通过添加react-globals.d.ts打字稿定义文件到我的VS项目，但我也必须删除这两个做了“导入React ='反应'的行;”。当我没有将所有东西都捆绑到1个JavaScript文件中时，我猜CommonJS导入语法对于外部模块不是必需的。

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

这种方法的问题是我不知道如何在各个打字稿文件中设置断点。我只能在巨型捆绑的JavaScript文件中设置断点来进行调试。我终于放弃了并与微软通了电话，试图弄清楚如何让所有这些新技术一起工作。好伤心的查理布朗！

微软回到我身边说，TypeScript version 1.8（测试版）将解决所有这些绑定问题。我想这意味着Gulp和Browserify在Visual Studio中不再需要捆绑。

来源

2015-12-18 19:09:17 Lambert

Visual Studio 2015 TSX文件中的Hello World（React.js和TypeScript）

回答

相关问题