我用 TypeScript 語言的七個月

2013/07/18 | 分類： IT職場, 開發(fā) | 0 條評論 | 標簽： Javascript, TypeScript

【感謝@Little2Mao 的熱心翻譯。如果其他朋友也有不錯的原創(chuàng)或譯文，可以嘗試推薦給伯樂在線?！?/p>

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

什么是TypeScript

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

評估

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

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

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

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

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

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

使用

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

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

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

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

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

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

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

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

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

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

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

總結

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

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

我愛TypeScript！

Ted