歷經一年多的漫長等待，TypeScript RTM囉!
昨天在北美TechEd 2014，微軟發佈了Visual Stuiod 2013 Update 2 RTM，除了上週提過的SCSS，還有另一則令人興奮的消息 -- TypeScript 1.0 RTM也正式納入Visual Studio支援項目，從此我的軍火庫再添利器一枚，伴我在網站叢林衝鋒陷陣。
TypeScript是我的偶像--Anders Hejlsberg的最新力作(想感受神人灌頂的朋友可以看這裡)。近三十年Coding生涯，有超過一半時間與Turbo Pascal、Delphi、C#為伍，這些語言幾乎都出自Anders之手，我稱得上是資深信徒。而隨著前端程式愈寫愈多，JavaScript日益複雜肥大，老覺得手邊專案的JavaScript遲早會變成哥吉拉，有追需解決方案的危機感。而TypeScript剛好能補足JavaScript欠缺強型別與介面規範、結構鬆散難掌握，以及缺少編譯檢核保護等弱點，讓我格外有興趣。如今TypeScript問市，預期會在我未來的前端開發中扮演重要角色。
先前已聽說TypeScript RTM並納入VS2013 Update2 RC，一收到VS2013 Update 2 RTM的消息，二話不說立刻下載安裝，接著網站新增項目選單就有TypeScript File可選:
新增TypeScript檔案後，VS2013會提示要不要用NuGet下載現有JavaScript程式庫的TypeScript Typing File(即定義檔，Definition File，附檔名為*.d.ts)?
在NuGet用"tag:typescript"關鍵字查詢，已有不少知名JavaScript程式庫的定義檔，例如: jQuery、AngularJS、Knockout、Google Maps… 等，而元件廠商如Telerik也開始為其元件如Kendo UI提供TypeScript定義檔。將現有JavaScript的定義檔加入專案後，即使還沒開始寫自己的TypeScript，也能感受TypeScript帶來的好處。
另外，在現有JS檔按右鍵，選單的Search for TypeScript Typings...也可帶出NuGet Manager查詢"tag:typescript 該JS名稱"關鍵字，方便快速尋找對應的定義檔。
以jQuery為例，透過NuGet安裝TypeScript，專案會多出Scripts/typings/jquery/jquery.d.ts[如下圖(1)所指]，在自訂的TyepScript檔案(hello.ts)加入/// <reference path="typings/jquery/jquery.dts" />參考宣告[如下圖之(2)]，此時輸入jQuery函式，會有完整的Intellisense提示[如下圖之(3)]，而其內容與傳統JavaScript Intellisense有很大不同: 支援同一方法參數個數、型別不同的多載(Overloading)，而參數的型別會有如JQueryAnimationOptions之特定型別。
最後，若程式呼叫參數不符合介面規範，例如: .on()只傳單一字串參數未提供事件處理函式，TypeScript將編譯失敗，並顯示錯誤訊息及錯誤所在位置[如下圖之(4)]，享受如同編譯式語言的謹嚴防呆。
前面提到的JQueryAnimationOptions在定義檔中已定義屬性，應用時只需宣告變數的型別為JQueryAnimationOptions，Visual Studio會自動列出並限制可用的屬性名稱，屬性名稱不符會造成編譯錯誤。對我來說，這是TypeScript最迷人之處，日後為了打錯字氣到想剁手指的機會應該會少一點吧? orz
*.ts檔案在存檔或編譯專案時會自動產生*.js及*.js.map(.map可用於IE偵錯JavaScript時對應出TypeScript程式碼所在位置)，但產生的JS檔及MAP檔不會被包含在專案中。可以想像TypeScript對應的JavaScript如同bin/*.dll，是編譯後的產品，而非原始碼的一部分。
經過以上的簡單示範，大家應該已約略體驗到TypeScript的優點，如果你跟我一樣有重度JavaScript開發需求，值得考慮在專案引進TypeScript，防止JavaScript變成追擊的怪獸。
【延伸閱讀】
- 快速瞭解 TypeScript 是什麼東西 by ericsk
- TypeScript 開發實戰 TypeScript投影片 by 保哥
- TypeScript官方網站 : 快速入門、技術手冊
- TypeScript線上編輯器