TypeScript 強型別 JavaScript – Rafy Web 框架選型

BloodyAngel發表於2015-03-08

今天看到了 AngularJs 2.0 版本將基於 TypeScript 構建 的訊息。與同事們對 TypeScript 展開了討論。本文記錄一些個人的想法。

 

理想的 JavaScript 開發模式


其實早在 TypeScript 釋出早期的時候,我就已經開始關注這個語言。因為在2012年初時,我需要為 Rafy/OEA 平臺選型編寫 Web 端自動介面生成框架:Rafy.js。而這個客戶端框架需要基於一些流行的 JS 庫來進行開發,當時選型的重點就是選擇哪一個基礎框架。

當時,我期望能找到一種可以編寫大型 JavaScript 框架程式的開發模式。理想情況下,這種開發模式需要:

  • 支援物件導向設計。無疑,物件導向設計方法依然是當下最重要的設計方法。.NET、Java、C++ 等都是物件導向的語言。封裝、繼承、多型,大大的提高了程式的可重用性、可維護性、靈活性。所以,支援物件導向是大規模框架開發的必要條件。
  • 支援快速重構。我認為重構是高階開發者必備的一個非常重要的能力。沒有不變的完美設計,只有不斷進步的設計。框架中的依賴關係、呼叫關係往往比較複雜,雖然外部的介面要儘量保持穩定、相容,但是框架內部的介面卻會經常變動。而框架中動輒上萬行、不重複的程式碼,如果沒有對重構的支援,很難想象如何維護好這麼多的程式碼。
  • 編譯時錯誤檢查、程式包管理、高效的程式碼提示……一說到程式碼的可維護性,可能我們都是在說程式本身的設計。但是開發工具的提升,也能大大提升開發者的開發效率,以及對程式程式碼的維護成本。所以上述的這些提升開發效率的功能,對於開發大型程式來說,也是必要的。

上面說的這些要求,對於強型別的 .NET、Java 開發來說,其實都是最基本的。但是,對於弱型別的動態語言 JavaScript 來說,卻不是易事。弱型別、動態的特性,導致如果不到執行時,就很難確定一個變數的具體型別,所以也就很難提供程式碼提示、重構等。從我開發 JavaScript 的第一天開始,我就一直被這些問題困擾,希望未來有一天能有技術解決它們。

 

Rafy.js 的基礎框架選型


當時在編寫 Rafy Web 前端框架時,為了解決上述的問題,我挑選了幾個方案。其中一個就是 TypeScript!我經過試用後發現,強型別的 JavaScript,確實可以解決這些困擾。但無奈的是,當時的 TypeScript 只是一個剛出生的嬰兒,版本號 0.8,連第一個正式版本都沒有釋出,實在不敢用在真實專案上,由於專案的時間要求,所以不得不放棄了這個語言。

此外,我也考察了幾個 JS 框架,最終選定了 ExtJs 4。一是因為我要做的是 SinglePageApplication 的 Web 介面框架,而 ExtJs 4 中帶了大量的介面控制元件,非常方便使用;其次,ExtJs 4 提供了客戶端的實體模型,這可以與 Rafy 服務端實體可以更好地結合起來。更重要的是,ExtJs 4 帶來了全新的物件導向型別系統,這解決了物件導向設計的基礎設施問題。雖說如 prototype.js 等其它框架也或多或少地支援了部分的物件導向設計,但是 ExtJs4 的型別系統,無疑是支援得最全面的:名稱空間、封裝、繼承、介面、靜態、單例、型別引用管理。所以,Rafy.js 最終是基於 ExtJs4 來構建的。

下面是當時 Rafy.js 開發完成後的框架類截圖:

imageimage

注意到,為了更好地解決開發過程中的上述問題。我們不得不人為地新增了一個《Javascript 類庫開發規範》。該文件中的內容其實還是約定了一些封裝、繼承、多型的編寫約定(ExtJS 給出的物件導向型別系統同樣不完美)、以及一些程式碼的規範。這些問題,其實完全可以從語言、工具的角度解決,但是我們不得不人工約定、人工檢查!

雖然 ExtJs4 大體上解決了物件導向設計的問題。但是由於重構困難,編寫低效,導致 Rafy.js 的第一個版本只寫了幾千行,就已經感覺到維護起來很吃力了。

 

TypeScript


上面說了這麼多,無非就是想表達:強型別很重要、重構很重要、工具很重要。而這些正是 TypeScript 語言設計的主要目標:“As we look to the 2.0 release, we 're focusing on two goals in addition to our main goal of bringing good tooling to JavaScript development.  The first is to align with ES6…….“

 

先來說明一下,TypeScript(強型別 JavaScript)的優勢:

  • 更好的開發工具:支援重構、程式碼自動完成、程式碼導航、編譯檢查(靜態程式碼分析:顯示警告和錯誤)、程式包管理……
  • 更好的語言特性:型別指定、泛型、物件導向支援。
  • 相容原生的 JavaScript 。

這正是我想要的東西,也是開發大型 JS 專案的利器。

 

但是,TypeScript 並不適應於所有的開發人員、所有的專案,下面是 TypeScript 適應的場景:

  • 適應較大、複雜的專案。例如 SinglePageApplication、大型 JS 框架、前端遊戲。
  • 需要支援物件導向設計、高可重用性、元件化開發的 JS 程式碼。

下面是 TypeScript 不適應的場景:

一些簡單的、不需要 OOD、靈活性高、動態性高的程式碼就不適合選擇 TypeScript。例如一般性的 Web 應用或站點的前端開發,這種頁面級的邏輯往往編寫在頁面中,即簡單,也不需要 OOD;再如,JQuery 框架的開發,這種框架的目標是靈活、方便、動態,而不是物件導向,所以也不太適合,所以 JQuery 框架應該不會使用 TypeScript 來重寫。

 

目前,TypeScript 已經發布了 1.4 版本。開啟 Visual Studio 2013 的擴充套件管理器,即可安裝:

image

 

接下來的計劃


接下來,我將使用 TypeScript 來把 Rafy.js 重新編寫。在正式改 Rafy.js 之前,我還會把之前做的這個 Web 遊戲《Javascript 坦克遊戲》改造一下試試。

敬請期待。

 

 

相關文章:

TypeScript MSDN Blog

TypeScript 官網

TypeScript 線上試用

Dart、CoffeeScript、TypeScript 和 JavaScript 哪種最適合專門學習?

為何TypeScript是任何事情的答案?

Type入門(JavaScript的超集)-譯

相關文章