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的高效开发流程。