每天学习一点点,成功增加一大步

NodeJs笔记:使用 typeScript 开发的搭配

NodsJS zhanghui 1278℃

上几周时间都在学习 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.org

1.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 中的更多使用可参与以下网址:

http://www.expressjs.com.cn/

http://www.runoob.com/nodejs/nodejs-express-framework.html

 

转载请注明:隨習筆記 » NodeJs笔记:使用 typeScript 开发的搭配