上几周时间都在学习 angular4 中，由于我现在的开发主要是在后端程序，而对前端的开发只保留了学习编程初期时的一些知识，所以我前端方面的开发并不是很深入，只是了解了 JavaScript 一些皮毛，掌握 JQuery 的基本使用，平时用的前端开发也是应付着去做，遇到难点就找别人写案例来用，而近几年大部分的时间也都是花在后端的开发上了。而这几年新出的前端知识也没有去深入的研究。之所以这几个月花时间去接触 angular 包括了从第1版到第4版的相关基本知识，也是因为 angularJS 可以作为很好的前端模板引擎结合 JQuery 的页面特效的一个组合，还有就是 angular2 之后采用了 TypeScript 新的语言，在 TypeScript 代码中看到后台编程的一些影子，它是 javaScript 的升华。所以借学习 TypeScript 的机会再回过头来看如何在 Node 中用它来开发。
一、配置环境
1.1、建立 node 项目
使用终端工具，在项目的根目录（注意是空目录）中执行“npm init -y”命令创建一个“package.json”的文件，文件中的基本信息为：
{
"name": "nodejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
// npm run start
"start": "node ./build/hello",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
接着引入 node 的运行定义文件，引入的命令是“npm i @types/node –save”。
npm 不加配置的话是原生镜像地址，会涉及翻墙的问题，使用以下淘宝镜像可解决：
npm install @types/node --registry=http://registry.npm.taobao.org
npm install typescript --registry=http://registry.npm.taobao.org1.2、创建“tsconfig.json”
node 本身是不认 typeScript 语言的，所以要将 typeScript 编译成 javaScript，所以在项目的根目录就要创建一个“tsconfig.json”，这个文件是用来告诉编译器如何将 typeScript 编译成 javaScript。
{
// 编译器的配置
"compilerOptions": {
// 指定生成哪个模块系统代码
"module": "commonjs",
// 目标代码类型
"target": "es5",
// emitDecoratorMetadata 和 experimentalDecorators 是与装饰器相关的
// 在编译的时候保留装饰器里面的原数据
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
// 在表达式和声明上有隐含的'any'类型时报错。
"noImplicitAny": false,
// 用于debug
"sourceMap": false,
// 仅用来控制输出的目录结构--outDir。
"rootDir": "./src",
// 编译完后要放在哪个文件夹里面
"outDir": "./build",
// 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。
"watch": true,
// 开发的时候要使用 es6 的语法
"lib": ["es6"]
},
"include": [
"./src/**/*"
],
// 排除编译的时候哪些个文件要排除掉
"exclude": [
"node_modules"
"views",
"static"
]
}
在编辑完“tsconfig.json”之后，如果你使用的也是 WebStorm 编辑器，通过“setting”来设置让 IDE 知道要使用这个配置文件作为配置来编译 TypeScript 。
图1：配置步骤
二、测试项目的正常启动
2.1、在“src/hello.ts”中输入代码
import * as http from 'http';
const server = http.createServer((req, res)=>{
res.end('Hello Node!');
});
server.listen(3000);
2.2、在终端中输入启动服务命令
node build/hello.js
2.3、在浏览器中输入“http://localhost:3000/”运行后的效果
图2、运行后的效果
三、简单的路由
3.1、引入“express”依赖库
npm install express --save
3.2、在入口的 TS 文件里面输入代码
// 入口
import * as express from 'express';
const app = express();
app.get('/', (req, res) => res.end('This is Home!'));
app.get('/users', (req, res) => res.end('This is User!'));
const port = 3000;
const host = 'localhost';
const serv = app.listen(port, host, () => {
console.log(`server start, address: http://${host}:${port}`);
});
3.3、简单的传参路由
// 入口
import * as express from 'express';
import * as path from 'path';
import * as bodyParser from 'body-parser';
const app = express();
// parse application/json
app.use(bodyParser.json());
// 静态资源文件，例如图片、CSS、JavaScript 文件等
app.use(express.static(path.join(__dirname, 'static')));
app.get('/', (req, res) => res.end('This is home!'));
app.get('/users', (req, res) => {
res.json(users);
});
app.get('/users/:id', (req, res) => {
res.json(users.find((user)=>user.id == req.params.id));
});
const serv = app.listen(3000, ()=>{
const host = serv.address().address;
const port = serv.address().port;
console.log(`server start, address: http://${host}:${port}`);
});
export class User {
constructor(public id: number,
public name: string) {}
}
const users: User[] = [
new User(1, '张三'),
new User(2, '李四'),
new User(3, '王五'),
];
关于“express”在 Node 中的更多使用可参与以下网址：
转载请注明：隨習筆記 » NodeJs笔记：使用 typeScript 开发的搭配
