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）

回答

相關問題