為什么是TypeScript
最近在做H5的游戲，最終選定的TypeScript作為開發語言。主要是看重他有強類型和Class，作為習慣使用AS3,Java等強類型編程的人來說，還是習慣這種編程寫法。聽一些直接使用JavaScript開發稍微大的游戲的同事說，沒有強類調試什么的都比較困難。我個人平時做小游戲用得比較多是純js，比較大型的倒沒嘗試，所以這個不好下斷論。另外一個主要原因是因為用TypeScript隨時可以生成兼用不同ES版本和瀏覽器的代碼，這個很重要。最后，國內比較流行的Egret和Laya都支持TypeScript。
摘點百度百科的描述，想更深入了解的同學可以自行查資料，有機會我也寫個為什么要選擇TypeScript：）
安裝搭配環境，這個問題其實都不太大，主要是后面的自動編譯TypeScript文件為js文件和調試ts文件的問題，有需要的同學可以直接跳到后面去看。
TypeScript是一種由微軟開發的自由和開源的編程語言。它是javascript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，已工作於TypeScript的開發。[1-4]
TypeScript擴展了JavaScript的語法，所以任何現有的JavaScript程序可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發而設計，而編譯時它產生JavaScript 以確保兼容性。[5] TypeScript 支持為已存在的 JavaScript 庫添加類型信息的頭文件，擴展了它對於流行的庫如 jQuery，MongoDB，Node.js 和 D3.js 的好處。
安裝配置環境
- 安裝node.js
TypeScript是在node.js的環境上，node.js下載地址：https://nodejs.org/en/download/ - 安裝TypeScript
使用Node的npm命令安裝TypeScript編譯器，在cmd界面里輸入：
npm install typescript -g 進行安裝- 1
- 1
如果npm指令無效，那有可能nodejs安裝失敗或者沒有配置相關的環境變量，可以直接進入nodejs的安裝目錄，然后在cmd進入當前目錄，再執行該指令
3. 安裝WebStorm
我這里使用的是WebStorm-2016.3.2，大家根據自己情況自行下載
WebStorm官網：( https://www.jetbrains.com/webstorm/ )
WebStorm自動編譯TypeScript
默認情況，WebStorm是提供了創建TypeScript的模版文件，但是不提供自動編譯ts文件為js和map文件。
網上找的一些教程，主要是教大家額外配置一個File Watcher來對ts文件進行自動編譯。后來我發現新版本的WebStorm已經提供自動編譯的功能了，只是需要設置一下。
1. WebStorm自帶配置自動編譯TypeScript功能
通過 File – Settings，調出 Settings界面，然后選擇以下的界面即可配置：
他默認Compile那里的Enable TypeScript Compiler是沒有打勾的，所以打上勾就可以了。
打勾后默認是使用選擇 Use tsconfig.json的設置方式的。所以你還得增加一份tsconfig.json配置文件。
WebStorm也是提供了模版，直接新建，選擇創建 tsconfig.json File即可。
tsconfig.json的默認信息：
{ "compilerOptions": { "module": "commonjs", "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }
具體的參數信息，可以考慮這里：https://www.tslang.cn/docs/handbook/tsconfig-json.html
如果不想使用tsconfig.json的話，那么可以直接使用WebStorm內置的參數選項，也就是旁邊的
Set options manually
我個人推薦是使用是tsconfig.json，畢竟方便自由，只要熟悉了配置信息，就好多了，而且egret和laya都是使用tsconfig.json的。
- 通過File Watcher來自動編譯TypeScript
這個就是網上介紹比較多的方式，我自己也是測試過，也是一樣是可以的，這個有點像Set options manually的方式，參數什么的需要自己配置。根據個人喜好了。一些參數的簡要說明：
Program:C:\Users\[username]\AppData\Roaming\npm\tsc.cmd
注意，這個安裝了nodejs之后就會有，請按照自己實際的用戶名
Arguments:--sourcemap --target "ES5" Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map Working directory:$FileDir$
其實參數之后配置，還可以根據自己的實際情況，配置不同的目錄，比如編譯后輸出到bin-debug目錄。
WebStorm斷點調試TypeScript
斷點調試這個功能很強大，必須的，首先安裝WebStorm的調試功能，請參考我另外一個篇blog，配置好調試環境：
WebStorm強大的調試JavaScript功能
之所以可以調試ts文件，主要還是因為那個map文件，必須ts必須生成map文件。在WebStorm里面調試ts文件，和調試普通的js文件沒有任何區別。
有個要注意的地方，需要在WebStorm的main.html下面引入ts自動生成好的js文件哦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="Script.js"></script> <script src="ScriptClass.js"></script> <script src="Person.js"></script> </head> <body> <canvas id="example" width="640" height="480"> Please use! </canvas> <script> main(); </script> </body> </html>
如果WebStorm不能像Egret或者Laya那樣可以自動插入，那么就得我們自己寫腳本或者插件來自動插入js文件了。
轉載自CSDN--地址：http://blog.csdn.net/sujun10