Sublime Text 2 对于 TypeScript 的支持

我一直在使用 Sublime Text 2 编写程序。ST2 本身不支持 TypeScript,而很显然我们需要语法高亮功能,就得借助于插件:https://github.com/Railk/T3S。T3S 还具备检查代码错误功能,我们编写的 Angular 2 代码,很难通过开发工具纠错,插件提供的这项功能也非常实用。

T3S安装

首先,找到 ST2 的 Package 文件夹,通过在 ST2 中点击 Preference > Browse Packages:

st2-browse-packages

点击后会进入 Package 文件夹,记住文件夹路径,然后使用 git 将 T3S clone 到 Package 中:

因为 T3S 本身支持的是 Sublime Text 3,支持 ST2 的代码在 ST2 分支中,所以需要切换一下分支:

安装完成。

Angular 2 环境

Angular 2 的开发环境比较复杂,主要的原因是其使用了 ES6,新标准不被大多数浏览器支持,所以需要一些中间件将 ES6 代码编译成普通浏览器可执行的 JavaScript 代码。这里的环境搭建参照的是官网教程 5 MIN QUICKSTART。我已经按照文章中内容搭建好了一个学习库,可通过 git 获取:

下载后执行:

完成后就可直接开始 Angular 2 的代码编写。如果想确认环境是否搭载成功,可以这样做:

之后会直接在浏览器中出现以下页面,表示环境已经搭建成功:

ng2运行成功界面

用到的库类

虽然环境的搭建只要照着教程步骤一步步来就能轻松完成,但由于 Angular 2 引用了相当多的库类,在开始编程前,做一个简单的梳理,会让思路更清晰。下面看看 package.json 中的依赖:

用到的库类非常多,这里分类简单介绍,每个库类都给出连接,可以查看详细内容。

ES6 功能补充

注意以下三个库类:

这三个库类主要用处是弥补浏览器 JavaScript 对于 ES6 而言功能上的不足。前面两个看名字也能明白个大概:es6-promise 提供 ES6 风格的 Promise,es6-shim 是一些基本功能的补充。

reflect-metadata ,它提供的是装饰器功能,这个功能不存在于 ES6 标准中,TypeScript 会用到。简单的说,装饰器就是 Angular 2 中常用到的 @ 符号。比如在 first-angular-component 分支 app.component.ts 文件中:

关于装饰器更详细的内容参看:Decorators

异步功能

zone.js 提供的是一个异步的上下文,rxjs 也跟异步有关系,但异步是不是其全部甚至主要功能,还有待确定。在编写 Angular 2 程序时,zone.js 没有被显式的引用,它应该是被 Angular 2 源文件用到了,在一些出错信息中可以看到。

RxJS 全称 Reactive Extensions。原文中说目前项目只是简单的搭建,没有使用到这个库,但以后会用到(其实应该是用到了,我试着删除 index.html 中对它的引用,会出错)。

开发工具

后者是一个简易的服务器,前者方便在命令行中同时运行多个命令。在 package.json 的 script 中有这么一行,用到了 concurrently:

当然,这里也用到了 lite-server。

TypeScript 相关

Angular 2 的程序会使用 TypeScript 来编写,写好的内容,通过 typescript 编译成普通 JavaScript 文件让浏览器执行。当执行 tsc 命令以后,会在源文件相同的路径下,生成相应的 JavaScript 文件。

但这里会有个问题,TypeScript 的编译器无法识别 JavaScript 的库类,比如 jquery 甚至 Angular 本身,所以我们需要提前在 TypeScript 上定义用到的库类。typings 将完成这部分工作。

发表评论

电子邮件地址不会被公开。 必填项已用*标注