TypeScript 重构 JavaScript 坦克大战：从强类型到架构优化

TypeScript 重构 JavaScript 坦克大战：从强类型到架构优化

源码下载

作者已将完整源码上传至 CSDN，无需资源分即可获取，下载地址为：http://download.csdn.net/detail/zgynhqf/8565873。

该项目基于 VS 2013 配合 TypeScript 1.4 版本进行开发。项目打开后的初始界面如下图所示：

JsTankGame 1.0：这是最初使用纯 JavaScript 编写的坦克游戏版本。

JsTankGame 2.0：这是直接将 JS 代码翻译为 TypeScript 后的初步版本。

JsTankGame：这是在 2.0 版本基础上，经过类型重构后的最终游戏版本。

重构步骤与架构演变

重构步骤

由于原有的 JS 游戏基于 MS Ajax Client Library 构建，并采用了面向对象设计（OOD）方式，且 TypeScript 完全兼容 JS 代码，因此移植工作相对简单。主要工作集中在替换类型相关的代码，包括类、继承和接口的定义。

完成上述类型转换后，便得到了使用 TypeScript 编写的 2.0 版本。在此过程中，作者深刻体会到了强类型语言带来的诸多便利，同时也发现了一些 TypeScript 尚不完善之处（将在后文详述）。

获得强类型的 2.0 版本后，重构并未结束。为了进一步体验强类型在重构中的优势，作者决定在此版本基础上进行代码结构的深度重构。

得益于强类型代码，作者可以清晰地分析出每个类型和方法的具体使用位置，从而快速理清类型间的依赖关系。结果令人惊讶：原本以为设计良好的代码，实际耦合度远高于预期。这种直接编码而未先画图的设计方式导致了混乱，具体依赖关系见下图：

从图中可以看出，各精灵类型之间的关系较为混乱，双向依赖随处可见。（注：由于 SpriteManager 被绘制在另一张图中，实际关系比图中展示的更为复杂和混乱。）

基于上述分析，作者绘制了新的关系图，并据此重构了所有代码，从而得到了最新的 3.0 版本。

新版本的类型关系图如下所示：

分层架构：

精灵层：

管理器层：

在代码层面，主要将各精灵之间耦合的逻辑移植到了上层的管理器中。同时，为精灵定义事件机制，以解除精灵与管理器之间的直接耦合。

TS 首次体验中的优缺点分析

TS 首次体验中的优缺点分析

优点：Lambda 表达式很好地解决了 this 指针指向问题。Chrome 和 IE 浏览器均支持直接调试 TypeScript。此外，在过程中还发现了弱类型无法捕捉的错误，例如重命名操作未同步修改原有代码的情况（参见 SpriteManager.js 第 98 行）。

缺点：开发环境方面，目前尚未集成代码注释功能，需手动拷贝；不支持 Code Snippets（代码片段）；不支持关键字代码生成（如 if、while、switch 及括号匹配）；不支持代码区域（Region）定义。语法方面，暂不支持事件的定义；也不支持为类定义重载方法，例如 SpriteBase.IsCollided 方法所示。

其他问题：

编译生成的 JS 代码存在一定冗余，尤其在命名空间部分表现明显。重写基类方法时缺乏提示；基类的属性获取器/设置器无法被重写；无法区分哪些方法是虚方法。接口中不能定义只读属性。此外，代码中仍存在 BUG（参见 SpriteManager.ts 第 93 行）。简单定义数字类型字段时，默认值并非 0，而是 NaN。

总结

总结

总体而言，经过试用，作者认为 TypeScript 截至 1.4 版本已可用于正式的大型 JavaScript 项目开发，但仍有许多方面需要改进。

附 Chrome 和 IE 浏览器调试 TypeScript 的截图：

以上即为本文的全部内容，希望有助于大家熟练掌握 TypeScript。