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代码到es52.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/'))
});
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
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');
///
import q = require('q');c.第三方模块且没有tsd文件
对于没有tsd文件的第三方模块,IDE是无法提供精确的智能提示的,只能按照commonjs的语法来进行导入:
var q = require('q');简而言之,使用import导入的模块,支持类型检查和智能提示,使用如
var foo = require('bar')导入的模块不能享有这些特性.
