使用 TypeScript 重新编写的 JavaScript 坦克大战游戏

TypeScript 重构的 JavaScript 坦克大战游戏：实践、体验与优化

近期，我对 TypeScript 进行了深入学习，并以一个实践项目——重新编写 JavaScript 坦克大战游戏代码——来检验我的学习成果。现在，我想和大家分享这个项目的详细情况，希望各位对此感兴趣的小伙伴能够喜欢。

一、源码分享

我将源码上传到了 CSDN，无需资源分即可下载。源码使用 VS 2013 和 TypeScript 1.4 开发。打开源码，你会看到三个版本的游戏：JsTankGame 1.0（原 JS 编写的坦克游戏）、JsTankGame 2.0（使用 TypeScript 移植的游戏）以及基于 2.0 版本的进一步重构的新游戏。

二、重构步骤

原 JS 游戏采用 MS Ajax Client Library 构建，以面向对象的设计方式开发。由于 TypeScript 兼容 JS 的全部代码，因此移植工作主要集中在对类型进行重构，包括替换类型设计的代码类、继承、接口等。在这个过程中，我体验到了强类型语言的优势，也发现了一些 TypeScript 目前尚待完善的地方。

得到强类型的 2.0 版本后，我并未停下脚步。为了更深入地体验强类型对于重构的好处，我决定在这个版本的基础上做代码结构上的重构。有了强类型编写的代码，我可以更方便地分析出每一个类型、每一个方法的具体使用情况，从而快速了解类型之间的依赖关系。在分析过程中，我发现原本认为设计得不错的类型之间耦合性实际上非常高。按照新的关系图进行重构后，就得到了的 3.0 版本。

三、类型关系图

在代码重构过程中，我绘制了新的类型关系图，主要包括分层图、精灵图以及管理器图。在代码层面，主要是将各精灵之间耦合的代码移植到上层的管理器中，通过为精灵定义事件来解除精灵与管理器的直接耦合。

四、TypeScript 的体验感受

在试用 TypeScript 的过程中，我感受到了它的优点和缺点。优点包括 Lambda 表达式很好地解决了 this 指针的问题，Chrome 和 IE 都能直接调试 TypeScript 等。我也发现了一些 TypeScript 的缺点和开发过程中遇到的难点，如开发环境尚未集成代码注释功能、不支持关键字代码生成、语法上不支持事件定义等。

五、其它注意事项

我认为 TypeScript 到目前的 1.4 版本已经可以用于正式的大型 JS 项目开发。它还有很多地方需要改进。希望通过我的分享，大家能更深入地了解 TypeScript，并在实际项目中灵活应用。

附：Chrome、IE 调试 TS 截图（此处应添加相关截图）。

以上就是本文的全部内容了，希望对大家熟练掌握 TypeScript 有所帮助。