TypeScript：更好的JavaScript

1、TypeScript：更好的JavaScript目錄作為編程語言的TypeScript2TypeScript特性簡介2對象模型的擴展3聲明語義學(xué)3數(shù)據(jù)語義學(xué)3函數(shù)語義學(xué)4class和繼承語義學(xué)6代碼組織和重構(gòu)8小結(jié)8標(biāo)簽：TypeScript,編程語言,JavaScrip作為編程語言的TypeScript關(guān)于TypeScript，首先要認(rèn)識的一點就是：它是Anders Hejlsberg的作品。Anders是第一流的編程語言設(shè)計師，也是第一流的編譯器實現(xiàn)者。作為Object Pascal和C#之父，Anders這次仍然采用了此前的做法：他設(shè)計了一種新的語言，并實現(xiàn)了這種語言的編譯器，來改進一種

2、已有的語言。但這次又和此前有所不同，此前無論是Object Pascal還是C#，編譯的目標(biāo)代碼都是機器碼，而TypeScript的目標(biāo)代碼則是JavaScript。當(dāng)然，如果把瀏覽器看作是虛擬機，而JavaScript看作是在這種虛擬機上運行的目標(biāo)代碼也無不可?？偠灾褂肨ypeScript這種語言撰寫的源代碼需要經(jīng)過TypeScript編譯器的編譯，而產(chǎn)生的目標(biāo)代碼是標(biāo)準(zhǔn)的JavaScript。但這還不是TypeScript在語言設(shè)計層面上的特別之處，特別之處有兩點。TypeScript支持on-the-fly編譯，即寫一句TypeScript就可以立即得到對應(yīng)的JavaScript代

3、碼，這個特性和CoffeeScript類似。但它比CoffeeScript支持更強的上下文推導(dǎo)，不需要完整的語句寫完，就可以生成對應(yīng)的、不完整的JavaScript代碼。TypeScript是JavaScript的超集（superset），“任何合法的JavaScript都是合法的TypeScript?！边@種設(shè)計很明顯是借鑒了C+對于C做擴充時采用的做法，它兼容已有的JavaScript代碼的決定給很多JavaScript程序員向TypeScript轉(zhuǎn)型時鋪就堅實的第一步他們可以從自己已有的代碼出發(fā)，通過一點一點的改動來體會到TypeScript帶來的好處，同時，時刻保留說“這樣就夠了”，然后

4、停止的權(quán)利。直到掌握了比較全面的TypeScript技術(shù)以后，才從一開始就采用TypeScript來撰寫代碼，而只取用編譯結(jié)果。實際上，“任何合法的JavaScript都是合法的TypeScript”這種說法并不準(zhǔn)確，準(zhǔn)確的說法是“任何合法的ECMAScript 6都是合法的TypeScript”。當(dāng)然，ECMAScript 6還是一個正在修訂的語言規(guī)范，而TypeScript在現(xiàn)階段生成的任何目標(biāo)代碼，涉及可能會引起ECMAScript 6的新特性的，都采用了向下兼容的ECMAScript 5規(guī)范作為準(zhǔn)則。但對于各個瀏覽器自行對JavaScript做的那部分?jǐn)U充，TypeScript不保證予

5、以支持。TypeScript特性簡介前面已說過，TypeScript的設(shè)計目標(biāo)是作為JavaScript或者說ECMAScript 6的超集。換句話說，如同C+的初始目標(biāo)是作為“更好的C”一樣，TypeScript也可以看作是“更好的JavaScript”，那么好在哪里呢？其實用C+和C的關(guān)系來做類比，還是很恰當(dāng)?shù)摹ypeScript充分利用了JavaScript原有的對象模型并在此基礎(chǔ)上做了擴充，添加了較為嚴(yán)格的類型檢查機制，添加了模塊支持和API導(dǎo)出的能力。比起JavaScript，TypeScript提供了更多在語言層面上的支持，使得程序員能夠以更加標(biāo)準(zhǔn)化的語法來表達語義上的約束，從而

6、降低了程序出錯的機率；TypeScript也使得代碼組織和復(fù)用變得更加有序，使得開發(fā)大型Web應(yīng)用有了一套標(biāo)準(zhǔn)方法。對象模型的擴展JavaScript支持極為廣泛的對象模型，除了null和undefined以外，幾乎所有的其他實體都可以視為對象，即使是數(shù)值、字符串和布爾型亦可以隱式使用其對應(yīng)的包裝器而直接作為對象用于一般場合。函數(shù)和數(shù)組這樣在其他的編程語言中不被視為對象的實體，在JavaScript亦視為“一等對象”（first-class object），除了利用實體本身的場合，例如使用數(shù)值索引或調(diào)用函數(shù)體以外，還可以作為普通的對象拿來添加屬性和方法。JavaScript對象支持在任意時刻動

7、態(tài)添加屬性和方法，并且支持修改和擴充內(nèi)建對象。一句話，JavaScript提供了大量進行對象操作的基礎(chǔ)設(shè)施（facilities）和基本工具（utilities），正是這些內(nèi)容構(gòu)成了JavaScript豐富而靈活的對象模型。TypeScript主要從兩個方面對JavaScript對象模型進行擴展：一是在核心語言方面，二是在類概念的模塑方面。聲明語義學(xué)在TypeScript中書寫涉及DOM對象的JavaScript代碼，一般來說不會遇到問題。但這并不是因為TypeScript語言中對DOM對象有所“了解”，而是因為TypeScript默認(rèn)會加載名為lib.d.ts的聲明文件，其中默認(rèn)已包含了所有

8、的DOM對象的聲明。換言之，當(dāng)你寫下這個語句：之時，編譯器實際上已隱式地在最前面加上了一句：這種聲明稱為環(huán)境聲明（ambient declaration），遇到環(huán)境聲明以后，TypeScript便會試圖從聲明的來源（如聲明庫中）分析和推導(dǎo)對象的類型信息。如果找不到任何的來源，它便默認(rèn)該對象的類型為any。但無論如何，環(huán)境聲明都不會向生成的JavaScript里加任何語句。事實上，所有的TypeScript聲明都不會生成對應(yīng)的JavaScript語句，因為JavaScript對象模型中的聲明是可選的。這里也可以看出TypeScript遵循“除非必要，不生成多余的語句”的哲學(xué)。但聲明在TypeSc

9、ript中除了有著預(yù)先提供類型信息的重要作用之外，編譯器還能根據(jù)這些信息完成強大的類型推導(dǎo)，以及精準(zhǔn)的靜態(tài)類型檢查。數(shù)據(jù)語義學(xué)TypeScript中的數(shù)據(jù)要求帶有明確的類型，如果設(shè)定為一種類型，卻要將該類型內(nèi)不合法的值賦給它，則靜態(tài)類型檢查機制會將這樣的語句標(biāo)示為錯誤?？梢圆捎胕nterface關(guān)鍵字定義具名結(jié)構(gòu)類型，這個特性類似于在JavaScript中采用字面量來定義JavaScript對象。所不同的是，在TypeScript中每個組分都必須指定類型，不過組分可以是可選的，在實際提供字面量對象時，可選組分可以不提供。同樣地，interface的數(shù)據(jù)類型定義，以及在TypeScript中為數(shù)

10、據(jù)指定的任何靜態(tài)類型聲明，都不會在生成任何的JavaScript目標(biāo)代碼有任何體現(xiàn)。例如上面這段代碼生成的JavaScript目標(biāo)代碼僅僅是：函數(shù)對象的類型主要由它的簽名式（signature）決定，包括各個形式參數(shù)的名字、類型和返回值類型。值得注意的是，函數(shù)對象的返回值可以是void，這是void類型唯一可以出現(xiàn)的地方，而它的唯一可能取值是undefined。函數(shù)語義學(xué)TypeScript中的函數(shù)除了在JavaScript的函數(shù)對象模型的基礎(chǔ)上添加了靜態(tài)類型檢查，體現(xiàn)了函數(shù)的數(shù)據(jù)方面之外，還在函數(shù)本身的性質(zhì)上增加了不少新特性，例如函數(shù)缺省參數(shù)值：它會對應(yīng)地生成以下的JavaScript目標(biāo)代

11、碼，從這里可以清晰地看到它生成代碼的邏輯是通過判斷參數(shù)有無定義來進行的：TypeScript支持有限的函數(shù)重載，為何說是有限的呢？因為一般意義上的函數(shù)重載是根據(jù)函數(shù)簽名式的不同，在函數(shù)被實際調(diào)用時根據(jù)實際參數(shù)的類型來綁定到特定的重載函數(shù)的。其背后的實現(xiàn)機制，大多數(shù)是所謂的名稱重整（name mangling）。但TypeScript中的函數(shù)重載不能這樣做，它只支持能夠以共用實現(xiàn)體為基礎(chǔ)的重載，無論聲明了多少個同名且簽名式不同的函數(shù)，它都只能有一個實現(xiàn)體，且這個實現(xiàn)體必須對所有的重載版本都有意義。這樣說可能比較令人費解，看個例子好了：只要看一下上述TypeScript代碼生成的JavaScrip

12、t目標(biāo)代碼，就明白了大半：原因就在于TypeScript在實現(xiàn)重載時并沒有使用名稱重整機制，而JavaScript又不支持重載，所以只能做出這樣非常大的折中方案了。TypeScript中最引人注目的一個函數(shù)對象特性是支持所謂的“箭頭記法”（arrow notation），即Lamda表達式。例如下面的三個函數(shù)是等價的：但箭頭記法最重要的用途還是在需要使用回調(diào)函數(shù)的場合。此時最易犯的一個錯誤就是this的作用域并非保留在被調(diào)用函數(shù)所在的局部作用域，而成了函數(shù)調(diào)用方所在的作用域。還是通過一個例子來看：此時，點擊頁面，彈出的警告框顯示的值是“NAN”，顯然有問題。而問題就出在這里的this指的是函數(shù)

13、調(diào)用方作用域，此處成了全局作用域，結(jié)果自然不對。此時只要改用箭頭記法，問題就迎刃而解：這個記法是ECMAScript 6引入的，查看一下TypeScript生成的目標(biāo)代碼，就可以了解它是采用了迂回的辦法在實現(xiàn)達到效果的同時又保持向下的兼容性。class和繼承語義學(xué)TypeScript對JavaScript對象模型最重要的擴充，自然在于它補充了JavaScript中所沒有引入的“類”的概念。是的，在JavaScript中沒有類，只有對象，要實現(xiàn)所謂的“類式操作”（classical operations），如封裝、多態(tài)等，要通過若干基礎(chǔ)設(shè)施，如原型、構(gòu)造函數(shù)等來完成。這些對于非常熟悉JavaSc

14、ript的程序員來說，也許都是可以完成的任務(wù)，但對于新手來說就困難重重了。并且，即使是高手，一段時間不寫相關(guān)的代碼也很容易遺忘和出錯。但TypeScript卻提供了標(biāo)準(zhǔn)的機制，將普通程序員熟悉的、C+和C#中常用的類概念映射到JavaScript中去，這樣就大大降低了在JavaScript進行類式操作的難度。由于相關(guān)的概念理解起來并不困難，但技術(shù)內(nèi)容卻非常多，所以這里只介紹幾點較關(guān)鍵的。首先，用一句話來概括在TypeScript中class的核心語義：所有的class都是一個立即函數(shù)，所有的數(shù)據(jù)成員都是這個函數(shù)實例的屬性，所有的方法都是這個函數(shù)原型的屬性，所有的靜態(tài)成員都是這個函數(shù)的構(gòu)造函數(shù)的

15、屬性。各就各位，不會出錯。只要看一下class生成的JavaScript目標(biāo)代碼就很明了，假設(shè)有個根據(jù)工齡計算工資的Human類定義如下：它生成的JavaScript目標(biāo)代碼如下：值得說明的是，TypeScript支持所謂的“存取器”。采用存取器，可以將函數(shù)封裝，并且以數(shù)據(jù)屬性的形式暴露出來。例如可以為上述類增加一個獲取工資數(shù)額的存取器：對應(yīng)的JavaScript代碼比較復(fù)雜，瀏覽器需要支持ECMAScript 5才能運行：代碼組織和重構(gòu)TypeScript中引入了模塊的概念，這類似于C+中的名字空間。它可以把聲明、數(shù)據(jù)、函數(shù)和類封裝在模塊中，并采用export關(guān)鍵字導(dǎo)出，供模塊外部的代碼取用

16、。之所以說它和命名空間比較相似，一是因為同名的模塊可以自動合并，甚至可以分別存儲在多個文件中；二是因為模塊的名字可以分成不同層次，在層次較多時還可以命名簡化的別名。但無論模塊怎么組織，最終生成的還是標(biāo)準(zhǔn)的、可直接取用的JavaScript代碼。正是靠著模塊化、可插拔的結(jié)構(gòu)，TypeScript才得以在維護一個較小的語言核心的前提下，對廣泛使用的庫如jQuery、CommonJS和Node.js等提供了完整的支持。由于TypeScript并不是采用字符串匹配的粗糙方式來推導(dǎo)變量和函數(shù)的名字，對TypeScript代碼進行命名的重構(gòu)就如同微軟的其他編程語言一樣容易。只需要選中要重新命名的實體，并鍵入新的名字，而不需要擔(dān)心名字相同而意義不同的其他實體也被同時重命名了。小結(jié)TypeScript是現(xiàn)今所有對JavaScript的改進中，唯一完全兼容并作為它的超集存在的解決方案。并且，TypeScript幾乎是改進了JavaScript對象模型的方方面面，本文介紹的只是其中比較重要的一部分技術(shù)，還有很多細節(jié)還需要讀者自己去探索?，F(xiàn)在，TypeScript的最新版本是0.8.1，并且開放了全部的源代