1.安裝node，因為ts的編譯器是js/ts寫的；
安裝node後同時獲得npm命令，這是nodejs世界裏的包管理器（也可以看作node的app商店）；
2.安裝vs 2015或者vs code，當然這不是必須的，但是這裏強烈推薦寫ts的工具，vs第壹，vsc第二；
3.vs自帶了TypeScript（vs2012+，vs2015update1自帶了ts1.7）,最新版本的typescript for vs去官網下載即可, 或者如果不依賴vs（比如mac環境）, 可以用命令行裝ts編譯器
npm i -g typescript@next
4. 安裝了ts後, 就會有2個命令可用：tsc和tsd, tsc用來編譯TypeScript代碼, tsd用來下載第三方js類庫的ts定義文件(或者叫頭文件)，熟練使用tsd，工作效率提升，因為減少了80%查文檔的時間，所以寫ts可以說是jser打通了任督二脈，上手任何新的開發環境都很快；
有網友指正tsd工具不是安裝ts的時候自帶的，需要另外安裝，裝太久不記得了。
npm install tsd -g
5. 命令行下載react的ts頭文件,
tsd install react-global --save
註意上面之所以寫 react-global 而不是react， 因為我們接下來使用比較原始的寫法，直接把React當作全局對象使用， 而不作為es6模塊（必須用import引入），不需要Babel編譯也不需要webpack打包；
上面執行的tsd命令下載了ReactJS類庫的頭文件, 下面用tsc命令創建壹個ts項目配置文件
tsc --init
命令創建了tsconfig.json配置文件, 打開該文件
增加"jsx": "react", 就是自動把tsx變成最終的js, 而不是jsx
把"outDir": "built", 這行去掉,這樣編譯的文件就會在當前目錄輸出
"target": "es5", 這裏es3改成es5,
"watch": true 是否監聽文件修改 如果妳用的是vs,這行不重要
6.下載reactjs文件，如果沒有安裝bower命令，可以手動去官網下載react類庫
bower install --save react
7.以上環境配置好了, 開始寫代碼:
創建壹個demo.tsx文件(註意這裏是tsx, 不是ts也不是jsx)
創建壹個demo.html, 添加文件的引用
<!doctype html>
<html>
<head>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/react-dom.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
</body>
</html>
8. demo.tsx 寫代碼
class MyClass extends React.Component<any, any> {
render() {
return <h1>hello {this.props.name}</h1>;
}
}
document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(<MyClass name="Tom" />, document.body);
});
9. 如果保存了demo.tsx後, 沒有在目錄下發現自動編譯了demo.js, 那麽可能是vs沒配置好,如果妳沒有裝vs或者vsc,沒關系,在當前文件夾下命令行運行
tsc
tsc命令會自動根據tsconfig.json裏面配置的情況, 自動幫妳把代碼編譯成js, 這是編譯後的js文件
10. 打開demo.html可以看到效果了;
11. 至於題主說怎麽學習, 其實跟JS完全沒兩樣, 上面demo.tsx的代碼, 跟react官網的es6寫法壹模壹樣多了<any,any> 這兩個prop和states類型約束, 僅此而已;
12. 下班, 有空再寫;
－－－－－－時間分割－－－－－－
13、繼續寫，對1-12進行潤色，轉入傳教模式；
妖獸啦，這裏14-15的文字怎麽不不見了，知乎編輯器bug好多。
不記得寫了什麽，大概說的是 工廠方法創建子類和用class直接繼承的差異。
React.createClass 和 Backbone.View.extend 等都是工廠方法創建子類
文字斷了。。。。
以上的代碼，工廠方法在創建子類的同時，做了壹些初始化的動作，這與單純的原型繼承不同，所以在使用class方式進行子類繼承，這樣的寫法是無效的；
class MyView extends React.Component {
render() {
return <h1>hello {this.state.name}</h1>; //會拋異常,因為state是null
}
//不起作用的
getInitialState:(){
return {name:'',age:20};
}
}
需要改成如下方式，下面是官網給出的方案（這裏TypeScript和ES6情況是壹樣的）
class MyView extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: '',
};
}
render() {
return <h1>hello {this.state.name}</h1>;
}
}
16、當組件化遇到強類型：
從前寫JS組件，壹般復用性比較差，基本寫完就仍，原因如下：
1）暴露了太多的Dom結構以及別的實現細節；
2）命名挫，缺乏可記憶性，本身編程中變量和方法的命名對於碼農來說就是天坑；
3）JS天生缺乏私有和公***成員的約束，不加註釋根本不知道怎麽使用該類庫/組件；
React解決了把dom標簽暴露出去的問題，TS則解決了語言層面的問題，並提供了強大的重構能力，妳根本不需要記住組件的API，因為工具會列出來；
17、強類型的ts有IDE的代碼提示，但是面對各種mvvm的字符串模版組裝，卻無用武之地，以下是典型的mvvm數據綁定和有IDE支持的JSX數據組裝在開發體驗上的區別；
模板字符串的綁定裏，工具無法檢查出問題，只能在運行時拋出異常，而jsx則可以提示拼寫錯誤。
18、關於生產力再拋壹個概念：無障礙編程；
我們平時的開發工作，有不少時間花在查API文檔、調試代碼、查字典（給變量命名），需要不停地切換任務窗口……
上面的例子比較小，實際開發中各種JSON對象可能有10來個屬性，且結構層層嵌套，不壹邊查文檔壹邊抓包，根本無法完成開發；
如果項目是並行開發的，文檔都還沒定義出來（但是產品原型已經有了，甚至html頁面都已經切好），如何快速完成前端部分的開發工作？
業界常用方法是使用mock數據（先造假數據），下面介紹壹種更簡單的辦法（為了舉例先虛擬壹個需求場景 —— 壹個留言板html的組裝）；
別忘了JS變量是可以用中文的，好吧不用查字典了，先把需求完成再說，在組裝html的過程中TS+JSX發揮了巨大的優勢，三下五除二就把組裝界面的代碼寫好了，不用調試我可以確定沒有錯誤的；
過了些天，WebAPI的數據結構定義出來了，可以著手進行代碼重構（或者說把查字典的工作集中完成），利用開發工具的重構功能進行變量改名：
最後項目完成的時候，是把所有類型的定義都挪到獨立的描述文件裏(比如叫做webapi.d.ts)，原來的interface可以改成type關鍵字(類型別名)：
以上，這個開發過程中基本沒有壹邊查文檔、壹邊查字典，效率的提升是明顯的。