毫無疑問，您在 Microsoft .NET Framework 上投入了大量資金，它確實是功能強大的平臺，提供很多實用的工具。 如果您同時擁有了 C# 或 Visual Basic .NET 和 XAML 的知識，前途將不可限量。 但是，現在您需要考慮一種已經創立了一段時間的成熟語言，而且在過去幾年內作為主要應用程式平臺程式語言。 當然我要談論的是 JavaScript。 JavaScript 應用程式越來越多，其功能也在不斷增強。 Node.js 作為開發可擴充套件的 JavaScript 應用程式的整個平臺已日益普及，它甚至可以在 Windows Azure 上部署。 而且，JavaScript 可以與 HTML5 結合使用，用於遊戲開發、移動應用程式，甚至用於 Windows 應用商店應用程式。

作為 .NET 開發人員，您不能忽視 JavaScript 的功能，也不能忽視它在市場上的普及程度。 我向同事闡述這個觀點時，經常聽到他們抱怨 JavaScript 如何難用、沒有提供強型別化、沒有類結構等等。 我反駁他們說 JavaScript 是一種實用的語言，提供了很多模式來滿足他們的需求。

這就是 TypeScript 所起的作用。 TypeScript 不是一種新語言。 它是 JavaScript 的超集 - 一種功能強大的型別化超集，這意味著所有 JavaScript 都是有效的 TypeScript 並且編譯器生成的是 JavaScript。 TypeScript 是開源專案，與此專案有關的所有資訊都可以在 typescriptlang.org 上找到。

 撰寫本文時，TypeScript 已推出預覽版本 0.8.1。

在本文中，我將通過類、模組和型別來介紹 TypeScript 的基本概念，以說明 .NET 開發人員如何可以更輕鬆處理 JavaScript 專案。

類

如果您使用 C# 或 Visual Basic .NET 之類的語言，應該很熟悉類這個概念。 在 JavaScript 中，通過模式（如閉合和原型）來實現類和繼承關係。 TypeScript 引入了您所熟悉的傳統型別語法，並且編譯器生成實現該意向的 JavaScript。 以下面的 JavaScript 程式碼段為例來說明：

1.           var car;
2. car.wheels = 4
   ;
3. car.doors = 4;

它似乎很簡單明瞭。 但是，.NET 開發人員一直很猶豫是否要使用 JavaScript，因為它的物件定義很寬鬆。car 物件以後可以新增其他屬性，而不實施和不知道每個屬性表示什麼資料型別，因此在執行時引發異常。TypeScript 類模型定義如何改變這種情況，我們如何繼承和擴充套件 car 呢？ 讓我們看一下圖 1 中的示例。

圖 1 TypeScript 和 JavaScript 中的物件

TypeScript	JavaScript
class Auto{   wheels;   doors; } var car = new Auto(); car.wheels = 2; car.doors = 4;	var Auto = (function () {   function Auto() { }   return Auto; })(); var car = new Auto(); car.wheels = 2; car.doors = 4;

在左側是正確定義的名為 car 的類物件，它具有屬性 wheels 和 doors。 在右側，TypeScript 編譯器生成的 JavaScript 幾乎是相同的。 唯一的區別是 Auto 變數。

在 TypeScript 編輯器中，您新增其他屬性必然會收到警告。 不能簡單使用 car.trunk = 1 這樣的語句來開始。 編譯器會顯示“不存在 Auto 的 trunk 屬性”訊息，這對必須找到此資訊的任何人來說是件好事，因為 JavaScript 的靈活性 - 或按您的說法，因為 JavaScript 的“惰性”。

建構函式儘管在 JavaScript 中可用，它通過以下方式使用 TypeScript 工具再次得到增強：在編譯時建立該物件，在沒有在呼叫中傳入正確元素和型別時不允許建立該物件。

您不僅可以將建構函式新增到類，還可以使引數成為可選的、設定預設值或設定屬性宣告的快捷方式。 讓我們看一下僅顯示 TypeScript 的功能如何強大的三個示例。

圖 2 顯示第一個示例，它是一個簡單的建構函式，在其中通過傳入 wheels 和 doors 引數（此處用 w 和 d 表示）來初始化類。 生成的 JavaScript（在右側）幾乎是等效的，但是隨著您的應用程式的需求變化，有時並不是這樣。

圖 2 簡單的建構函式

TypeScript	JavaScript
class Auto{   wheels;   doors;   constructor(w, d){     this.wheels = w;     this.doors = d;   } } var car = new Auto(2, 4);	var Auto = (function () {   function Auto(w, d) {     this.wheels = w;     this.doors = d;   }   return Auto; })(); var car = new Auto(2, 4);

在圖 3 中，我修改了圖 2 中的程式碼，將 wheels 引數 (w) 預設為 4 並通過在 doors 引數 (d) 右側插入問號使它成為可選的。 請注意，與上一個示例一樣，將例項屬性設定為引數的模式是使用“this”關鍵字的習慣作法。

圖 3 修改後的簡單建構函式

TypeScript	JavaScript
class Auto{   wheels;   doors;   constructor(w = 4, d?){     this.wheels = w;     this.doors = d;   } } var car = new Auto();	var Auto = (function () {   function Auto(w, d) {     this.wheels = w;     this.doors = d;   }   return Auto; })(); var car = new Auto(4, 2);

此處是我希望在 .NET 語言中看到的功能： 可以僅在建構函式中的引數名稱前新增 public 關鍵字來宣告類的屬性。 還可以使用 private 關鍵字完成相同的 auto 宣告，但是隱藏了類的屬性。

使用 TypeScript auto 屬性宣告功能擴充套件了預設值、可選引數和型別批註，這是一個好的快捷方式，可以提高您的工作效率。 比較圖 4 中的指令碼，您可以清楚看到它們在複雜程度上的區別。

圖 4 Auto 宣告功能

TypeScript	JavaScript
class Auto{   constructor(public wheels = 4,     public doors?){   } } var car = new Auto(); car.doors = 2;	var Auto = (function () {   function Auto(wheels, doors) {     if (typeof wheels ===       "undefined") {       wheels = 4; }     this.wheels = wheels;     this.doors = doors;   }   return Auto; })(); var car = new Auto(); car.doors = 2;

TypeScript 中的類也提供繼承關係。 繼續以 Auto 示例為例，您可以建立擴充套件初始類的 Motorcycle 類。 在圖 5 中，我還向基類添加了 drive 和 stop 函式。 在 TypeScript 中，使用幾行程式碼就可完成新增 Motorcycle 類（它從 Auto 繼承並設定 doors 和 wheels 的相應屬性）。

圖 5 新增 Motorcycle 類

1.           class Auto{
2.   constructor(public mph = 0,
3.     public wheels = 4,
4.     public doors?){
5.   }
6.   drive(speed){
7.     this.mph += speed;
8.   }
9.   stop(){
10.     this.mph = 0;
11.   }
12. }
13. class Motorcycle extends Auto
14. {
15.   doors = 0;
16.   wheels = 2;
17. }
18. var bike = new Motorcycle();

在此處要指出的一個重要事項是：在編譯器生成的 JavaScript 頂部，您將看到一個名為“___extends”的小函式（如圖 6 中所示），它是曾注入生成的 JavaScript 中的唯一程式碼。 這是幫助執行繼承功能的幫助器類。 順便提一下，無論原始碼是什麼，此幫助器函式都具有完全相同的簽名。因此，如果您要在多個檔案中組織 JavaScript 並使用諸如 SquishIt 或 Web Essentials 等實用工具來合併指令碼，根據實用工具如何更正重複的函式，系統可能顯示一個錯誤。

圖 6 編譯器生成的 JavaScript

1.           var __extends = this.__extends || function (d, b) {
2.   function __() { this.constructor = d; }
3.   __.prototype = b.prototype;
4.   d.prototype = new __();
5. }
6. var Auto = (function () {
7.   function Auto(mph, wheels, doors) {
8.     if (typeof mph === "undefined") { mph = 0; }
9.     if (typeof wheels === "undefined") { wheels = 4; }
10.     this.mph = mph;
11.     this.wheels = wheels;
12.     this.doors = doors;
13.   }
14.   Auto.prototype.drive = function (speed) {
15.     this.mph += speed;
16.   };
17.   Auto.prototype.stop = function () {
18.     this.mph = 0;
19.   };
20.   return Auto;
21. })();
22. var Motorcycle = (function (_super) {
23.   __extends(Motorcycle, _super);
24.   function Motorcycle() {
25.     _super.apply(this, arguments);
26.     this.doors = 0;
27.     this.wheels = 2;
28.   }
29.   return Motorcycle;
30. })(Auto);
31. var bike = new Motorcycle();

模組

TypeScript 中的模組等效於 .NET Framework 中的名稱空間。 它們是組織程式碼和封裝業務規則以及流程的好方法，如果沒有這個功能，就不可能做到這點（JavaScript 沒有內建提供此功能）。 模組模式或動態名稱空間和在 JQuery 中一樣，是用於 JavaScript 中的名稱空間的最常見模式。 TypeScript 模組簡化了語法併產生相同的效果。 在 Auto 示例中，您可以在模組中包裝程式碼並僅公開 Motorcycle 類，如圖 7 中所示。

該 Example 模組封裝基類，並且通過使用 export 關鍵字做字首來公開 Motor­cycle 類。 這允許建立 Motorcycle 例項和使用它的所有方法，但是隱藏 Auto 基類。

圖 7 在模組中包裝 Auto 類

1.           module Example {
2.   class Auto{
3.     constructor(public mph : number = 0,
4.       public wheels = 4,
5.       public doors?){
6.       }
7.       drive(speed){
8.       this.mph += speed;
9.       }
10.       stop(){
11.       this.mph = 0;
12.       }
13.   }
14.   export class Motorcycle extends Auto
15.   {
16.     doors = 0;
17.     wheels = 2;
18.   }
19. }
20. var bike = new Example.Motorcycle();

模組的另一個好處是您可以合併它們。 如果您建立另一個也名為 Example 的模組，TypeScript 假定第一個模組中的程式碼和新模組中的程式碼都可通過 Example 語句訪問，就像在名稱空間中一樣。

模組為維護和組織程式碼提供了便利。 有了它們，維護大型應用程式對開發團隊而言將不再是沉重的負擔。

型別

對於不願意使用 Java­Script 的開發人員來說，他們抱怨最多的缺陷之一是 Java­Script 不提供型別安全性。 但是，實際上 TypeScript 是提供型別安全性的（這正是它稱為 TypeScript 的原因），它不僅僅是將變數宣告為字串或布林值。

在 JavaScript 中，將 foo 賦給 x 接著在程式碼中將 11 賦給 x 是完全可行的，但是當您想嘗試瞭解為什麼在執行時得到經常存在的 NaN 時就會頭疼不已。

型別安全性功能是 TypeScript 的最大優勢之一，有四個固有型別： string、number、bool 和 any。 圖 8 顯示宣告變數 s 的型別的語法以及在編譯器知道您根據該型別可以執行什麼操作後提供的 IntelliSense。

 
圖 8 TypeScript IntelliSense 的示例

除了允許宣告變數或函式的型別之外，TypeScript 還可以推斷型別。 您可以建立僅返回字串的函式。 知道該函式後，編譯器和工具提供型別推斷並自動顯示可以對返回值執行的操作，如圖 9 中所示。

 
圖 9 型別推斷的示例

此處的好處是您看到返回值為字串，而不必猜測它。 當要使用開發人員在程式碼中引用的其他庫（如 JQuery 或甚至是文件物件模型 (DOM)）時，型別推斷能提供很大幫助。

利用型別系統的另一方式是通過批註。 我們回想一下，原始 Auto 類是隻使用 wheels 和 doors 進行宣告的。 現在，通過批註，我們可以確保在 car 中建立 Auto 例項時設定正確的型別：

1.           class Auto{
2.   wheels : number;
3.   doors : number;
4. }
5. var car = new Auto();
6. car.doors = 4;
7. car.wheels = 4;

不過，在生成的 JavaScript 中，批註被編譯去掉，因此不必擔心引入多餘內容或其他依賴關係。 它的好處是強型別化並避免了在執行時通常發生的簡單錯誤。

介面提供在 TypeScript 中提供的型別安全性的另一個示例。 介面允許您定義物件的形狀。 

相關推薦