TypeScript: (Node.JS + gulp + express) 写RESTful API 做后端

前言

最近应公司项目要求,入坑Ionic,查了很多资料之后感觉还是使用TypeScript来写比较好,因本人本身的C++功底,TypeScript正好是类似面向对象形式的,这样接受新语言环境也比较快。

TypeScript简介

资料显示,TypeScript之父与C#之父是同一人,所以用法与面向对象应该有相似之处,不过本人对C#不熟,此不做评论。

TypeScript类似C++,需要编译为js来执行,也依然可以打断点来调试ts文件。而且TypeScript还有语法检查、变量类型等配置,实在是能提高js的安全性,因此我选择TypeScript来作为主语言。

环境搭建

初始化项目

既然最终是编译成js,环境就是Node.JS了。配置好node与npm后创建一个Project目录:

1
2
3
mkdir localtest
cd localtest
npm init

初始化项目会生成package.json文件,此文件为项目依赖库的跟踪文件,当你将项目分享给其他人时,无需全部分享,只需分享项目代码与此文件,对方即可使用npm install来自己创建项目依赖环境

package.json 样例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
cat package.json
{
"name": "localtest",
"version": "1.0.0",
"description": "This is a test.",
"main": "index.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "sohunjug",
"license": "ISC"
}

依赖库安装

下一步开始安装typescript、express、gulp等依赖库。

1
2
3
npm install -g typescript
npm install -g typings
npm install -g tslint

国内可能npm速度不是很给力,可以使用阿里出品的cnpm:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

之后上边的安装就可以使用新的cnpm,速度提升很大哦:

1
2
3
cnpm install -g typescript
cnpm install -g typings
cnpm install -g tslint

这些常用的可以安装为全局及使用-g,也可以在项目中安装取消-g,加上–save

1
2
3
cnpm install --save typescript
cnpm install --save typings
cnpm install --save tslint

下面开始安装express等依赖库:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
cnpm install --save express
cnpm install --save body-parser
cnpm install --save jade
cnpm install --save cookie-parser
cnpm install --save morgan
cnpm install --save gulp
cnpm install --save gulp-tsc
cnpm install --save run-sequence
cnpm install --save gulp-util
cnpm install --save gulp-clean
cnpm install --save tiny-lr
cnpm install --save gulp-live-server
cnpm install --save gulp-tslint
cnpm install --save debug

此时package.json变为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
cat package.json
{
"name": "localtest",
"version": "1.0.0",
"description": "This is a test.",
"main": "index.js",
"dependencies": {
"body-parser": "^1.15.2",
"cookie-parser": "^1.4.3",
"debug": "^2.2.0",
"express": "^4.14.0",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-live-server": "^0.0.30",
"gulp-tsc": "^1.2.3",
"gulp-tslint": "^6.1.1",
"gulp-util": "^3.0.7",
"jade": "^1.11.0",
"morgan": "^1.7.0",
"run-sequence": "^1.2.2",
"tiny-lr": "^0.2.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "sohunjug",
"license": "ISC"
}

TypeScript中依赖安装

本人使用typings,据网上资料显示,tsd已经过时了,所以也木有研究,此处不做评论。

此处typings,我是使用-g安装的全局:

1
2
3
4
5
6
7
8
9
typings install --global --save dt~express
typings install --global --save dt~node
typings install --global --save dt~serve-static
typings install --global --save dt~express-serve-static-core
typings install --global --save dt~mime
typings install --global --save dt~body-parser
typings install --global --save dt~debug
typings install --global --save dt~cookie-parser
typings install --global --save dt~morgan

使用–save安装本地则使用:

1
2
3
4
5
6
7
8
9
node_modules/.bin/typings install --global --save dt~express
node_modules/.bin/typings install --global --save dt~node
node_modules/.bin/typings install --global --save dt~serve-static
node_modules/.bin/typings install --global --save dt~express-serve-static-core
node_modules/.bin/typings install --global --save dt~mime
node_modules/.bin/typings install --global --save dt~body-parser
node_modules/.bin/typings install --global --save dt~debug
node_modules/.bin/typings install --global --save dt~cookie-parser
node_modules/.bin/typings install --global --save dt~morgan

gulp配置

同样看到网上评论,grunt为基于json配置来管理自动化部署,而gulp基于代码形式,更倾向于程序员使用,而且可以自己制作部署细节。

基于网上找到的配置,使用了一下发现对于express的app形式的热更新不支持,所以又找了些资料,终于自己配置出来了,现分享下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
var gulp = require('gulp');
var tsc = require('gulp-tsc');
var seq = require('run-sequence');
var del = require('gulp-clean');
var gls = require('gulp-live-server');
var chalk = require('chalk');
var gutil = require('gulp-util');
var tslint = require('gulp-tslint');

var paths = {
ts: {
src: [
'app/**/*.ts'
],
dest: 'build'
}
}

gulp.task('serve', () => {
seq('clean', 'build', 'watch');
})

gulp.task('watch', () => {
var server = gls.new('build/www.js');
server.start();
gulp.watch(['app/**/*.ts'], () => seq('tslint', 'clean', 'build'));
gulp.watch(['build/**/*.js', 'build/**/*.css', 'build/**/*.html'], file =>
server.notify.apply(server, [file])
);
gulp.watch('build/www.js', () => {
setTimeout(() => gutil.log('Restart Succeed!'), 500);
server.start.bind(server)()
});
});

gulp.task('build', () => {
return gulp.src(paths.ts.src)
.pipe(tslint({
formatter: "verbose"
}))
.pipe(tsc({
module: "CommonJS",
sourcemap: true,
emitError: false
}))
.pipe(gulp.dest(paths.ts.dest));
});

gulp.task('clean', () => {
del(paths.ts.dest);
});

gulp.task('rebuild', file => {
seq('clean', 'build');
});

gulp.task("tslint", () => {
return gulp.src(paths.ts.src)
.pipe(tslint({
formatter: "verbose"
}))
.pipe(tslint.report());
});

gulp.task('default', ['rebuild']);

此配置可以在当前目录中使用gulp来启动了,默认gulp执行default任务(即重新编译),还可以手动自己执行不同的task任务,其中gulp serve是自动热更新部署。

效果为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ gulp serve
[15:27:30] Using gulpfile xxxx/localtest/gulpfile.js
[15:27:30] Starting 'serve'...
[15:27:30] Starting 'clean'...
[15:27:30] Finished 'clean' after 1.36 ms
[15:27:30] Starting 'build'...
[15:27:30] Finished 'serve' after 15 ms
[15:27:30] Compiling TypeScript files using tsc version 1.8.10
[15:27:32] Finished 'build' after 2.6 s
[15:27:32] Starting 'watch'...
[15:27:32] Finished 'watch' after 57 ms
livereload[tiny-lr] listening on 35729 ...
[15:27:38] Starting 'tslint'...
[15:27:38] Finished 'tslint' after 213 ms
[15:27:38] Starting 'clean'...
[15:27:38] Finished 'clean' after 266 μs
[15:27:38] Starting 'build'...
[15:27:38] Compiling TypeScript files using tsc version 1.8.10
[15:27:40] Finished 'build' after 2.39 s
[15:27:41] Restart Succeed!

项目样例代码已更新GitHub(TypeScript-RESTful-sample)

代码中RESTFul样例我开发了一个简单的路由小框架。欢迎star。

参考链接:
http://brianflove.com/2016/03/29/typescript-express-node-js/

https://www.npmjs.com/package/gulp-live-server

文章目录
  1. 前言
  2. TypeScript简介
  3. 环境搭建
    1. 初始化项目
    2. 依赖库安装
    3. TypeScript中依赖安装
    4. gulp配置