TypeScript 使用方法

标签（空格分隔）： TypeScript

---

1.安装

有几个关键的npm包需要安装到电脑中

npm install tsc -g //执行typescript到js的编译

npm install tsd -g //用来下载typescript的声明文件xx.d.ts,使IDE对第三方包提供智能提示

npm install gulp -g //构建工具,非常重要

npm install babel -g   //暂时用不到,用来转换es6代码到es5

npm install babel-runtime //暂时用不到,用来转换es6代码到es5

2.gulp用法

gulp是一个Node下的构建工具,底下有各类自动化构建模块,本次需要安装的是gulp-tsc,安装代码如下

npm install gulp-tsc --save-dev

有了tsc和gulp-tsc,可以编写构建任务,轻松完成typescript到js的自动化编译.

首先在工程的目录下新建一个文件gulpfile.js(只能叫这个名字),填入以下代码:

var typescript = require('gulp-tsc');

var gulp = require('gulp');

gulp.task('compile', function () {

return gulp.src(['./ts/**/*.ts'])

.pipe(typescript({

target: 'es5',//把typescript转换成es5标准的js文件,也可以是es6,但这个node版本不支持

module: 'commonjs',//模块使用nodejs的标准

}))

.pipe(gulp.dest('./es5/'))

});

这样就编写了一个名叫compile的gulp 任务,该任务的具体工作就是把ts文件夹下的所有后缀为*.ts的文件镜像编译到工程的es5文件夹下.

题外话,gulp的基本api非常简单,只有3个,就是gulp.src获取文件,gulp.pipe操作文件,gulp.dest保存文件.

3.gulp结合VS Code

有了上面定义好的gulpfile.js,再配合VS Code的task,就可以随时编译ts文件.

需要做的是配置vs code的task.json文件,在vs code中按下ctrl+shift+p,输入task,选择configure task runner,在自动打开的task.json文件中输入以下内容:

{

"version": "0.1.0",

"command": "gulp",

"isShellCommand": true,

"args": [

"--no-color"

],

"tasks": [

{

"taskName": "compile",//compile为gulpfile中定义的任务名字

"args": [],

"isBuildCommand": true,//build命令为true

"problemMatcher": "$msCompile"

}

]

}

以上的配置相当于定义了刚才gulpfile中的的compile任务为我们vs code中的build任务.

接下来随时随地就可以按下ctrl+shift+B运行build任务,执行我们的typescript到js的转换.

4.tsd的用法

tsd是一个下载第三方包声明文件的工具,比如一些常用模块q,request,通过tsd install xxxx之后,会自动保存在typeings文件夹下.

下载下来的文件一般都是xxxx.d.ts格式,有了个这个文件,就可以在VS Code中支持该包的智能提示.

接下来以request包为示例:

npm install request --save

tsd install request --save

在你需要智能提示的文件第一行中添加如下代码:

///

那么该包就支持智能提示了.

tsd中收录了绝大多数常用包,一般来说够我们使用,但是也有不幸没被收录的,比如我们这次使用的serialport包,如果你还想有智能提示的话,只有自己写一个serialport.d.ts文件了,在里边声明方法和接口(我已经写了一部分我要用到的功能)

5.Typescript的模块加载

最近的Typescript版本(1.5.3)是同时支持commonjs和es6的模块加载的,但是,当编译目标(compile target)为es6时,不允许混合使用两种模块加载方式.

由于最新的nodejs(4.1.1)仍旧不支持es6模块加载方式,所以目前推荐的做法还是使用commonjs风格.

需要注意的是,在编写Typescript的时候,自己编写的模块和第三方模块有几种不同的加载方式.

a.自己的模块

自己编写的模块可以被编译器识别,并提供完整的类型检查和智能提示

import xxx from './foo/bar/hes.ts'

b.第三方模块且下载了tsd文件

要想使用智能提示和类型检查,必须先提供tsd的reference,才能使用import导入该模块,例如导入q模块

///

import q = require('q');

c.第三方模块且没有tsd文件

对于没有tsd文件的第三方模块,IDE是无法提供精确的智能提示的,只能按照commonjs的语法来进行导入:

var q  = require('q');

简而言之,使用import导入的模块,支持类型检查和智能提示,使用如var foo = require('bar')导入的模块不能享有这些特性.