標籤：pre strong npm 而且 comm mongodb 區別 hand 斷點
為什麼是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 的好處。
npm install typescript -g 進行安裝如果npm指令無效，那有可能nodejs安裝失敗或者沒有配置相關的環境變數，可以直接進入nodejs的安裝目錄，然後在cmd進入目前的目錄，再執行該指令
3. 安裝WebStorm
我這裡使用的是WebStorm-2016.3.2，大家根據自己情況自行下載
WebStorm官網：( https://www.jetbrains.com/webstorm/ )
預設情況，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的。
Program:C:\Users\[username]\AppData\Roaming\npm\tsc.cmd
注意，這個安裝了nodejs之後就會有，請按照自己實際的使用者名稱
Arguments:--sourcemap --target "ES5"Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.mapWorking 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
用WebStorm開發TypeScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
