歷經一年多的漫長等待,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變成追擊的怪獸。

【延伸閱讀】


Comments

Be the first to post a comment

Post a comment