HTML5游戏开发(二)：使用TypeScript编写代码

《HTML5游戏开发》系列文章的目的有：一、以最小的成本去入门egret小项目开发，官方的教程一直都是面向中重型；二、egret可以非常轻量；三、egret相比PIXI.js和spritejs文档更成熟、友好；四、学习从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的高效开发流程。