使用 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 。

二、测试项目的正常启动

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/”运行后的效果

三、简单的路由

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, '王五'),
];

阅读量 1:次