快速瞭解 TypeScript 是什麼東西

今天微軟釋出了一個新東西--TypeScript,這個 project 主要的負責人是 Anders Hejlsberg (C#, TurboPascal 之父),它可以幫助 JavaScript developers 更容易撰寫及維護「application-scale」的應用程式,我很快地研究及把玩了一下,發現它與過去很多類似的專案有許多不同之處,而這些不同之處也讓 TypeScript 更具有實用性及競爭力。

從這裡可以看一段 Anders Hejlsberg 自己來介紹 TypeScript 的影片:(出處 可下載MP4/WMV)

完全基於 JavaScript 語法

由於 JavaScript 的語法 (嚴格來講是 ECMAScript 262 3/e 或 5/e) 在 typing (資料型別) 上沒有很完美的解決方案,而且又有一些眉眉角角跟幾個大家熟悉的程式語言(如:C/C++、Java、C# 等)習慣不同,所以要使用 JavaScript 開發大型的應用程式,必須要有很小心的規範以及開發人員必須很深入瞭解 JavaScript 的「good/ugly/awful parts」(參考:JavaScript: The Good Parts)。

所以一直以來都有各式各樣的 project 想要改善這個問題(參考這裡有人整理了一個列表),最常被大家提到的就像 GWT (Google Web Toolkit) 、Script# 或是 CoffeeScript,它們都希望減輕 JavaScript 開發人員的負擔,改用一些結構良好或是更輕鬆的語言來開發應用程式(GWT 是 Java、Script# 是 C# 而 CoffeeScript 則是自定的語法),再透過各自的編譯器(compiler)來產出 JavaScript 程式碼。這些 projects 各有各的優缺點,也有其市場(減低語言轉換成本),乍看之下 TypeScript 好像也是在做類似的事,但它與上述提到的這些 project 不同的地方在於:它完全相容 JavaScript 原本的語法。也就是如果你過去剛好是一位 JavaScript developer,你可以在不改變過去撰寫 JavaScript 的習慣繼續撰寫程式,如同 TypeScript 官網上的範例:

這段程式碼,你可以儲存為 sample1.ts 這樣的檔案,然後透過 TypeScript 編譯器去編譯它,最後會產出一模一樣的 JavaScript 程式碼,這就顯示了它完全相容 JavaScript 語法,同時也證明可以繼續整合既有的 JavaScript libraries(如:jQuery, YUI 等) ,這都是其它 projects 比較少見的作法。

所以只要是寫 JavaScript 的環境(瀏覽器、NodeJS)都可以運用 TypeScript。

加入靜態型別

所以 TypeScript 到底對 JavaScript developers 有什麼好處呢?它最重要的任務就是在語言中加入了靜態型別(static typing)的語法,不僅讓開發人員利用這些語法撰寫更嚴謹的程式之外,也更容易讓其它工具來做程式碼分析--像是更容易最佳化程式碼或是程式碼編輯器中的語法提示(Intellisense)功能。

接下來我們可以透過程式碼範例來瞭解 TypeScript 如何加入靜態型別:

在這段程式碼中可以看到 TypeScript 加入了 interface 的關鍵字,而且 Person 介面中的每一個成員都有宣告了它的 type: string,並且在 greeter 函式的參數中也加入了型別的描述,這樣一來就讓程式碼變得嚴謹得多,而透過 TypeScript 的編譯器編譯過後,便會產生這樣的程式碼:

雖然很順利地產生正常的 JavaScript 程式碼,但看起來好像沒什麼特別的。但若是我們將原本程式中的 user 變數修改為:var user = 'Eric ShangKuan';(故意製造錯誤的型別),那在編譯時,就會產生下面的錯誤訊息:

test2.ts(12,26): Supplied parameters do not match any signature of call target: Type 'String' is missing property 'firstname' from type 'Person'

這就讓程式碼有了型別的「內涵」,除了編譯器可以分析程式碼之外,開發工具也可以運用這樣的特性,比方說 Visual Studio 2012 在安裝了 TypeScript 的擴充元件後,在撰寫 TypeScript 程式碼時,便能夠順利地出現語法偵測:

Visual Studio 2012 Intellisense Integration
Visual Studio 2012 中,TypeScript 的語法提示

如何開始

目前 TypeScript 是完全開放源碼的專案,有興趣的人可以到它的專案頁面上瀏覽,而使用 Visual Studio 2012 作開發工具也可以直接安裝擴充功能,這樣就能夠支援 TypeScript 的語法分析或編譯;如果是 NodeJS 專案,也可以直接以

$ npm install -g typescript

指令來安裝 TypeScript 的編譯器。

想問的問題

  • Q: 是不是只支援 Internet Explorer?

    A: 並不會產出特定瀏覽器專用的 JavaScript 程式碼,而是遵循 ECMAScript 3, ECMAScript 5 甚至也準備支援 ECMAScript 6 這些標準,所以只要是能執行這些標準的 JavaScript 引擎都支援。

  • Q: 目前有什麼限制嗎?

    A: 因為目前釋出的還算是 preview 階段,所以還有一些功能或是各平台的工具還在開發中,您可以到專案頁面上觀看大家的反饋,或是提出您的意見。

  • Q: Microsoft 會全力支持這個專案嗎?

    A: 答案是肯定的,Anders Hejlsberg 會一直帶領並貢獻這個專案,也期望能借助社群的力量讓它更茁壯。

更詳細的部落格介紹