云社区 博客 博客详情

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

华章计算机 发表于 2019-12-11 12:07:48 2019-12-11
0
0

【摘要】 本节书摘来自华章计算机《TypeScript图形渲染实战:2D架构设计与实现》 一书中第1章,第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的强类型、面向对象、面向接口和支持泛型的编程模式吧。


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:《TypeScript图形渲染实战:2D架构设计与实现》 —1.6.2 VS Code中单步调试TypeScript

下一篇:《TypeScript图形渲染实战:2D架构设计与实现》 —2 使用TypeScript实现Doom 3词法解析器

评论 (0)


登录后可评论,请 登录注册

评论