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

cat package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{
  "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

cat 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


{
  "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