HTML5遊戲開發(二)：使用TypeScript編寫代碼

《HTML5遊戲開發》系列文章的目的有：1、以最小的成本去入門egret小項目開發，官方的教程一直都是面向中重型；2、egret能夠很是輕量；3、egret相比PIXI.js和spritejs文檔更成熟、友好；4、學習從0打造高效的開發工做流。

• HTML5遊戲開發(一)：3分鐘建立一個hello world
• HTML5遊戲開發(二)：使用TypeScript編寫代碼
• HTML5遊戲開發(三)：使用webpack構建TypeScript應用
• HTML5遊戲開發(四)：飛機大戰之顯示場景和元素
• HTML5遊戲開發(五)：飛機大戰之讓全部元素動起來

工欲善其事，必先利其器。接下來兩篇文章，咱們將會打造基於TypeScript+webpack的高效工做流程。

本篇文章，咱們將會用TypeScript來從新改造一下以前的hello world實例。

項目完整源碼請見:github.com/wildfirecod…

在線地址：wildfirecode.com/egret-types…

將會有哪些變化

• 由於咱們只是改變main.js的編寫的方式，即由JavaScript改成TypeScript，那麼index.html不會有所變化。
• 咱們將引入TypeScript工做流程。

建立TypeScript配置

首先咱們在項目根目錄建立TypeScript配置文件tsconfig.json並添加如下配置內容：

{
    "compilerOptions": {
        "module": "es6",
        "target": "es5"
    }
}
複製代碼

配置會告訴TypeScript構建工具，咱們使用ES6 module來管理代碼，而且咱們的構建目標是ES5，這使得咱們的代碼能夠跑在比較老的瀏覽器上。

修改代碼

首先咱們把main.js修改成main.ts。 以後咱們建立全局對象egret的TypeScript聲明文件defs.d.ts，並添加內容：

declare var egret:any;
複製代碼

編譯代碼

咱們先安裝TypeScript編譯工具，這是一個全局命令。

npm install -g typescript
複製代碼

而後執行命令tsc來編譯TypeScript代碼。

tsc
複製代碼

接着，咱們會發現根目錄生成了main.js這個JavaScript文件。要說明的一點是，咱們如今使用的TypeScript語言編譯器是最新版本的。你能夠打開main.js，看一看裏面的內容相對於main.ts有什麼變化。

運行實例

咱們用chrome來運行index.html，即可以看到在畫布上出現瞭如上例同樣的紅色的hello world字樣。

下一步

ok。上述的步驟很是的簡單，並且看起來很是的不夠酷。下一篇文章咱們會考慮使用webpack來打造基於TypeScript的高效開發流程。