TypeScript 使用方法
標(biāo)簽（空格分隔）： TypeScript
1.安裝
有幾個(gè)關(guān)鍵的npm包需要安裝到電腦中
npm install tsc -g //執(zhí)行typescript到j(luò)s的編譯
npm install tsd -g //用來(lái)下載typescript的聲明文件xx.d.ts,使IDE對(duì)第三方包提供智能提示
npm install gulp -g //構(gòu)建工具,非常重要
npm install babel -g //暫時(shí)用不到,用來(lái)轉(zhuǎn)換es6代碼到es5
npm install babel-runtime //暫時(shí)用不到,用來(lái)轉(zhuǎn)換es6代碼到es5
2.gulp用法
gulp是一個(gè)Node下的構(gòu)建工具,底下有各類(lèi)自動(dòng)化構(gòu)建模塊,本次需要安裝的是gulp-tsc,安裝代碼如下
npm install gulp-tsc --save-dev
有了tsc和gulp-tsc,可以編寫(xiě)構(gòu)建任務(wù),輕松完成typescript到j(luò)s的自動(dòng)化編譯.
首先在工程的目錄下新建一個(gè)文件gulpfile.js(只能叫這個(gè)名字),填入以下代碼:
var typescript = require('gulp-tsc');
var gulp = require('gulp');
gulp.task('compile', function () {
return gulp.src(['./ts/**/*.ts'])
.pipe(typescript({
target: 'es5',//把typescript轉(zhuǎn)換成es5標(biāo)準(zhǔn)的js文件,也可以是es6,但這個(gè)node版本不支持
module: 'commonjs',//模塊使用nodejs的標(biāo)準(zhǔn)
}))
.pipe(gulp.dest('./es5/'))
});
這樣就編寫(xiě)了一個(gè)名叫compile的gulp 任務(wù),該任務(wù)的具體工作就是把ts文件夾下的所有后綴為*.ts的文件鏡像編譯到工程的es5文件夾下.
題外話,gulp的基本api非常簡(jiǎn)單,只有3個(gè),就是gulp.src獲取文件,gulp.pipe操作文件,gulp.dest保存文件.
3.gulp結(jié)合VS Code
有了上面定義好的gulpfile.js,再配合VS Code的task,就可以隨時(shí)編譯ts文件.
需要做的是配置vs code的task.json文件,在vs code中按下ctrl+shift+p,輸入task,選擇configure task runner,在自動(dòng)打開(kāi)的task.json文件中輸入以下內(nèi)容:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "compile",//compile為gulpfile中定義的任務(wù)名字
"args": [],
"isBuildCommand": true,//build命令為true
"problemMatcher": "$msCompile"
}
]
}
以上的配置相當(dāng)于定義了剛才gulpfile中的的compile任務(wù)為我們vs code中的build任務(wù).
接下來(lái)隨時(shí)隨地就可以按下ctrl+shift+B運(yùn)行build任務(wù),執(zhí)行我們的typescript到j(luò)s的轉(zhuǎn)換.
4.tsd的用法
tsd是一個(gè)下載第三方包聲明文件的工具,比如一些常用模塊q,request,通過(guò)tsd install xxxx之后,會(huì)自動(dòng)保存在typeings文件夾下.
下載下來(lái)的文件一般都是xxxx.d.ts格式,有了個(gè)這個(gè)文件,就可以在VS Code中支持該包的智能提示.
接下來(lái)以request包為示例:
npm install request --save
tsd install request --save
在你需要智能提示的文件第一行中添加如下代碼:
///
那么該包就支持智能提示了.
tsd中收錄了絕大多數(shù)常用包,一般來(lái)說(shuō)夠我們使用,但是也有不幸沒(méi)被收錄的,比如我們這次使用的
serialport包,如果你還想有智能提示的話,只有自己寫(xiě)一個(gè)serialport.d.ts文件了,在里邊聲明方法和接口(我已經(jīng)寫(xiě)了一部分我要用到的功能)
5.Typescript的模塊加載
最近的Typescript版本(1.5.3)是同時(shí)支持commonjs和es6的模塊加載的,但是,當(dāng)編譯目標(biāo)(compile target)為es6時(shí),不允許混合使用兩種模塊加載方式.
由于最新的nodejs(4.1.1)仍舊不支持es6模塊加載方式,所以目前推薦的做法還是使用commonjs風(fēng)格.
需要注意的是,在編寫(xiě)Typescript的時(shí)候,自己編寫(xiě)的模塊和第三方模塊有幾種不同的加載方式.
a.自己的模塊
自己編寫(xiě)的模塊可以被編譯器識(shí)別,并提供完整的類(lèi)型檢查和智能提示
import xxx from './foo/bar/hes.ts'
b.第三方模塊且下載了tsd文件
要想使用智能提示和類(lèi)型檢查,必須先提供tsd的reference,才能使用import導(dǎo)入該模塊,例如導(dǎo)入q模塊
///
import q = require('q');
c.第三方模塊且沒(méi)有tsd文件
對(duì)于沒(méi)有tsd文件的第三方模塊,IDE是無(wú)法提供精確的智能提示的,只能按照commonjs的語(yǔ)法來(lái)進(jìn)行導(dǎo)入:
var q = require('q');
簡(jiǎn)而言之,使用import導(dǎo)入的模塊,支持類(lèi)型檢查和智能提示,使用如
var foo = require('bar')導(dǎo)入的模塊不能享有這些特性.
