我用 TypeScript 語言的七個月

從2012年12月開始，我用 TypeScript 作為主要語言，用于一個大規模的企業項目。項目下個月要發布了，我想分享一些細節內容，包括我們團隊怎么使用 TypeScript 的，還有成就項目的工作流程。

什么是TypeScript

TypeScript是由微軟開發的一個能夠在Node.js上 運行的開源語言和編譯器。這個語言是在ECMAScript6基礎上演化并吸收了生成Javascript類別和接口的一些特性。Typescript 的編譯器使用TypeScript語言編寫，并且能夠在任何兼容Javascript的程序內運行，同時它也是作為node.js的一個工具包發布的。所 以該語言最終生成的仍然是Javascript腳本。

評估

在2012年十一月期間，我們發現我們所選擇的開發工具和對于Typescript的試用確實給團隊帶來很多便利。起初，我們試用了 Haxe，Dart，Coffescript等一系列語言，但是我們最終還是被擁有ECMAScript6特性Javascript編譯 器：Tyepscript打動了。我們所期望的是使用Javascript作為開發語言但同時又想要在我們的開發過程中注入一定的結構框架，而且希望能夠 依靠編輯器來進行一些糾錯和驗證。所以實際上我們最終還是只有在Javascript和Typescript之間作選擇。在這基礎上，團隊作了幾個小型的 項目雛形，并且迅速發現了以下一些有趣的特性：

驗證：Typescript能夠在編譯的同時讓我們驗證一些代碼在不同模塊中的重復使用。在聲明變量類型和定義 語句方法的時候，我們能夠很有效的對所有call/get/set的使用在所有模塊中進行交叉驗證。如果一個屬性被賦給了 bbox.controls.image類，那么在編譯時只有圖片實例或其子類才能夠滿足編譯條件。

報錯：Typescript編譯器能夠提供非常細節的報錯，如果提供額外的類和接口信息，那報錯的內容會更加的詳細。

輕量化：Typescript的類和接口在編譯時會蒸發的一干二凈從而生成純凈的Javascript腳本。

ECMAS6(ES6)：Typescript在ES6的基礎上添加了類和接口。它讓我們能夠利用最新的Javascript語法規則去編寫程序同時在編譯時添加ES3，ES5的標簽，使得其能夠兼容ES3，ES5的標準。這讓代碼的整理變得非常輕松。

Build process：在我們最初的檢驗和測試過程中，有一個部分是利用Ant創建一個團隊進程。通過對 環境的適當調試，開發者能夠和SCM（架構部署）進行同步并且建立一個擁有所有代碼組件(codepakages)的本地服務器用于開發和調試。整個創建 的過程遷入了LESS，RequireJS，Uglify2,TypeScript,模板處理和服務器的生成。

使用

在評估之后的幾個月里，我們基于TypeScript建立了一個穩定的團隊工作流程并且從中獲利良多。進程的創建(buildprocess)是我們開發過程中一個至關重要并且每天都會使用到的一個過程。基于TypeScript，我們每天的工作流程基本上如下所述:

• 從SCM進行更新
• 運行‘antall’==>創建全部+運行本地服務器
• 運行’antdev’或者’antts’==>增量式創建
• 檢校創建過程中的錯誤或者在瀏覽器中進行測試
• 清理bug然后重復以上步驟

我個人非常喜歡這樣的運作模型，從中我發現我們花在瀏覽器測試階段的時間遠少于之前的JavaScript項目。由于Build過程中就已經檢校了 一些接口/類型/語法的錯誤，因此在瀏覽器測試階段我們就減少了對此類錯誤的勘誤工作量。一旦所有人都熟悉了TypeScript的debugging流 程，我們大大的提高了工作效率，這是在以前的開發過程中所沒有體驗過的。花了5秒鐘編譯但是最終卻刪除了整一個沒有運作的毫無意義類聽起來有點不能接受。 這種防患于未然的debugging方式節省我們大約2個月的時間，而且代碼的質量也大大提高了。

當初在我們進行開發的時候，TypeScript定義文件的質量和內容不是非常理想。定義文件能夠讓你非常安全的從外部定義JavaScript的接口類型，但這樣做你的代碼必須在編譯時完全遵照定義文件。自從這個項目開始之際，我們借DefinitelyTyped項目為一些主要的或者非主要的JavaScript庫編寫潤飾了180個定義。小組最后在創建進程時使用了關于Require,JQuery,Backbone,Bootstrap,Underscore和EaselJS的定義文件。現在為TypeScript添加定義文件，你只要在你的main.ts文件中添加一下的代碼就可以了。

根據同樣的方法你也可以向TypeScript中添加一些外部庫。某種程度上來說定義文件，接口和TypeScript的類的運作方式是類似的。為 了簡化我們創建進程的過程，我們將這些調用過程全部綜合到一個init.ts文件中，這樣當編譯器工作的時候就可以自動載入所有該應用所需要 TypeScript代碼。哪怕是那些本需要通過先調用模塊才能調用的類也能在這里被調用表達，這樣這些類就會在編譯時預先在外部生成一個模塊文件以供使 用。注意這個外部模塊的代碼中”exportClass”的語法，它會告訴編譯器將文件視為一個外部模塊進行調用，而編譯器標識”-moduleamd” 會使得編譯器將模塊編排成AMD或者CommonJS的格式

除此之外，TypeScript還有另外一個很優雅整合代碼的功能。每一個類和變量都被輸出到瀏覽器窗口實體之外的一個路徑里以供全局訪問。我們使 用了bbox作為所有類和變量的命名空間，同時提供了輸入時的支持，你也可以便捷的為你自己的應用建立一個良好命名空間。以上的模塊包含在 了”bbox.controls”里并且在運行時可以發現它被輸出到了bbox.controls,Bounds中。考慮到我們有用到大約60多個類，我 們最大化的使用了這個模塊系統并且在開發過程中使用的非常順利。你可以遵照這個方法自由的導出和類別化你自己的變量或者所有的類，而不需要讓所有的變量都 歸屬于某個類。由于提供了類別和權限的限制，類別化輸出的變量對于模塊內單一的變量非常適用。隨著類別和模塊的介入，你使用JavaScript的方式也 會有所改變，并且很難形成比較差的實踐方式。隨著一個能夠監測到通過數組或者一個很特殊的類別重寫了某實體的高級編譯器，你可以一不同的方式利用 JavaScript進行開發，TypeScript作為一種語言有著它獨特的工作模式。它已經不完全是JavaScript了，但全包含了 JavaScript原有的所有特性。

通過一系列的開發實踐我發祥我自己已經通過對代碼的重構實 現了開發策略的轉換。由于有時需檢查在不同部分受到修改影響的代碼，我開始在有意識的改變變量類別，接口和命名空間等方面相信編譯器本身的行為。在編譯之 后我才會修改結果，并且根據需要進行代碼的重構。這在很多方面都使我能夠很有效處理較大的代碼量。編譯器為我省去了很多debugging的負擔。

至于我的開發環境，盡管其他團對成員選擇了Jetbrians，我依然選擇了sublimetext2+TypeScirpt語法高亮。毫無異議， 我發覺即使沒有自動完成的功能，sublime依然能提供很好的TypeScript開發環境。由于TypeScript編譯器本身就有著增量式的編譯功 能和豐富的IDE整合功能，可能需要更多的時間來證明到底Sublime/Edge/Jetbrains哪一個才是最適合的開發工具。

最后，當我愛上使用TypeScript的同時（當然，我也會繼續用下去），我發現了一個令人望而生畏的地方。有很多次，當你一頭扎進編譯環境中， 編譯器卻由于輸入信息不可用而阻止你調用一個方法或者變量。每當這時，我們發現只有我們手動修復bug時，利用關聯數組語法 （associativearraysyntax）去解決這個問題。比如：無論什么樣的分類形 式，foo[‘myProperty’]foo[‘myMethod’]() 應該能夠讓你介入foo的myProperty和myMethod屬性。這看起來有一些不可思議，但只要記住隨時可能用到關聯數組語法 （associativearraysyntax）就萬事大吉了，你總有需要它的地方。

最后附上一些項目開發過程中的總結數據：

• 63個typescript類
• 12個運行庫（libs）(Underscore,Require,Bootstrap,Jquery,Backbone,EaselJS…)
• 一次創建所有進程，用時8秒
• 一次創建所有開發進程，用時5秒
• 149Kb大小的運行庫文件和411Kb大小的類文件

總結

在過去7個月里用TypeScript做開發是一件非常愉快的事情。在之前的開發經驗里，我使用過ActionScript/ES4，但由于有著相 似的結構，我很快就適應了TypeScript，同時保持了JavaScript 優雅的代碼便捷性。在很多方面，我發現對于TypeScript的使用，的確使我們在團隊代碼質量和截止日期上有了很大提升。我不認為我是微軟的死忠，但 是TypeScript確實使我眼前一亮。它是過去三年里我所接觸的最好的也是比較容易接受的一個網頁開發的工具。我期待在未來能夠在更多的項目中用到， 并且能夠參與到該語言/編譯器的開發中去。

這周我將會在舊金山的Build去了解TypeScript0.9的一些特性，下個月我會在Senchacon和360Stack。

我愛TypeScript！

Ted

原文鏈接： Ted Patrick   翻譯： 伯樂在線 - 伯樂在線讀者
譯文鏈接： http://blog.jobbole.com/43675/