《TypeScript图形渲染实战：2D架构设计与实现》 —1.7 本 章 总 结

1.7  本 章 总 结

　　本章主要介绍了如何构建TypeScript的开发、编译和调试环境，使读者了解到TypeScript语言本身和开发工具是两个不同的概念。

　　首先TypeScript语言本身需要使用Node.js的包管理器NPM来获取，因此先从Node.js官网获取其安装包，然后通过NPM来全局安装TypeScript语言。

　　然后为了更好地体验TypeScript的开发环境，安装了TypeScript最佳搭档VS Code代码编辑器。

　　有了TypeScript语言和VS Code代码编辑器后，随后又构建了一个简单的开发和运行环境，实现了本书的第一个TypeScript程序，用来了解如何使用TypeScript编译（转译）器将单个TS文件编译（转译）成相应的JS文件。

　　有了JS文件后，就能在HTML中运行JS脚本，这时面临着如何快速启动HTML文件的问题。但是不想每次都要定位到HTML所在目录，然后通过右键菜单选择要运行的浏览器，因此此时引入了一个VS Code的插件：Open In Default Browser。通过该插件就能加速打开并运行HTML文件。

　　在TS源文件比较少的情况下，可以使用tsc命令然后输入多个TS源文件生成JS文件；如果TS源文件非常多的话，手动输入每个TS源文件，并且每次源文件修改后都要重新编译，这种情况非常不便。

　　我们会发现，通过tsc --init生成tsconfig.json文件，配置相关属性，使用tsc命令直接运行编译（转译）器后，任何源文件发生改变时会自动编译（转译）成JS文件。

　　至此，获得了一个方便、好用的TypeScript开发和运行环境。但是对于程序来说，模块化、解决资源自动加载跨域问题，以及TypeScript / JavaScript断点调试也是不可或缺的需求。要实现这些需求，需要一个HTTP服务器。原本笔者使用Tomcat，但是涉及复杂的Java运行和配置环境，后来发现了lite-server这个基于Node.js实现、使用NPM安装的轻量级服务器，它无缝地并入当前的开发环境，由此获得自动加载、热部署，以及潜在的调试功能。

　　配置好上述内容后，依旧存在一些问题（请参考1.5节介绍的两个不足之处），为了解决这两个问题，引入了SystemJS来自动编译和加载TypeScript源码，并且解决了存在的问题。

　　最后，我们构建了TypeScript / JavsScript基于VS Code的断点调试环境，先明确的一点是本书使用Chrome浏览器作为开发和测试环境，因此先通过NPM安装Debugger for Chrome调试插件，然后仅需配置一次，就能在VS Code中直接通过F5键启动HTML页面，并支持断点调试功能。

　　至此，搭建了一个完整的TypeScript开发、编译和调试的环境，能够支持如下几个功能：

* 直接启动HTML页面。

* 自动重新编译（转译）TypeScript。

* 解决资源跨域问题，支持服务器热部署。

* 模块化开发和加载TypeScript。

* TypeScript严格类型检测。

* 断点调试TypeScript。

　　如果读者是从C/C++、Java、C#、Objective-C等语言转到TypeScript开发的话，就会非常熟悉这种开发调试模式。

　　工欲善其事，必先利其器。有了TypeScript这个利器，接下来就来领略TypeScript的强类型、面向对象、面向接口和支持泛型的编程模式吧。