快速瞭解 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 中,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 會一直帶領並貢獻這個專案,也期望能借助社群的力量讓它更茁壯。