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

wildfirecode13發表於2018-10-16
HTML遊戲開發TypeScript

《HTML5遊戲開發》系列文章的目的有：一、以最小的成本去入門egret小專案開發，官方的教程一直都是面向中重型；二、egret可以非常輕量；三、egret相比PIXI.js和spritejs文件更成熟、友好；四、學習從0打造高效的開發工作流。

工欲善其事，必先利其器。接下來兩篇文章，我們將會打造基於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的高效開發流程。

相關文章