使用 TypeScript 重新編寫的 JavaScript 坦克大戰遊戲程式碼_基礎知識

原始碼下載

原始碼我已經上傳到 CSDN 了，不需要資源分，下載位址：http://download.csdn.net/detail/zgynhqf/8565873。

原始碼使用 VS 2013 TypeScript 1.4 進行開發。開啟後，顯示如下圖：

JsTankGame 1.0：舊的使用 JS 編寫的坦克遊戲。

JsTankGame 2.0：新的使用 TS 直接翻譯過來的遊戲。

JsTankGame：在 2.0 的基礎上，對類型進行了重構後的新遊戲。

重建步驟

由於舊的 JS 遊戲是採用 MS Ajax Client Library 構建，並且採用了 OOD 的方式來進行設計，再加之 TypeScript 可以兼容 JS 的全部代碼。所以使用 TypeScript 來移植的工作也比較簡單，主要是替換型別設計的程式碼：類別、繼承、介面等。

完成以上工作後，也就得到了使用 TS 編寫的 2.0 版本。過程中體會到了強類型語言的諸多好處，當然也有一些 TS 目前不完美的地方（後面會說）。

得到了強型別的 2.0 版本後，並沒有結束。為了體驗強型別對於重構的好處，我決定在這個版本之上做程式碼結構上的重構。

有了強型別寫的程式碼，我可以很方便地分析出每一個型別、每一個方法，具體在哪些地方被使用。這樣，我就能很快地知道類型之間的依賴關係。不看不知道，一看嚇一跳。之前一點一點隨心所欲寫的程式碼，以為類型設計得還不錯，之間耦合性應該不是很高。但圖畫完之後，才發現與想像中差點很遠，這就是沒有畫圖直接寫程式的結果，請看下面兩張圖：

可以看出各精靈類型之間的關係是比較亂的，雙向依賴隨處可見。 （其實圖中因為把 SpriteManager 畫到了另外一張圖，所以沒有顯示出更複雜、更亂的關係。）

據此，我繪製了新的關係圖，然後按照此關係來重構了所有的程式碼。這樣就得到了最新的 3.0 版本。

新版的型別關係圖如下：

分層：

精靈：

管理器：

程式碼層面，主要是把各精靈之間耦合的程式碼，都移植到了上層的管理器中。同時，為精靈定義事件來解除精靈與管理器的直接耦合。

 TS 首次體驗中感受的優缺點

優點： Lambda 非常好地解決了 this 指標的問題。 Chrome、IE 都能直接調試 TypeScript！ 過程中也發現了弱型別無法發現的錯誤。因為重命名，還沒有修改原來的程式碼。 （SpriteManager.js 98 行）

缺點： 開發環境-還沒有整合程式碼註解功能，只能手動拷貝。 開發環境-目前還不支援 Code Snippets。 開發環境-不支援關鍵字程式碼產生：if、while、swith、括號匹配等。 開發環境-不支援程式碼區域的定義（Region）。 語法-不支援事件的定義。 語法-暫時還不支援為類別定義重載方法。請參閱 SpriteBase.IsCollided 方法。

其它：

編譯出的 JS 程式碼有一定的冗餘。命令空間處顯得特別明顯。 重寫基類方法，沒有提示。 基底類別的屬性取得器/設定器無法重寫。 無法分辨哪些方法是虛方法。 介面中不能定義唯讀的屬性。 還存在 BUG。 （SpriteManager.ts line 93）。 簡單定義一個數字類型的欄位的話，預設值不是 0，而是 NaN。

總結 

總體說來，經過試用，我感覺 TS 到目前的 1.4 版本，已經可以用於正式的大型 JS 專案開發。但是還有很多地方需要改進！ 

附 Chrome、IE 偵錯 TS 截圖：

以上がこの記事の全内容です。皆さんが typescript をマスターするのに役立つことを願っています。