Typescript express 新手教程 S1

本教程最终解释权归斯温所有,如果你不认同他的解释,他会给你一记风暴之拳

Typescript express 新手教程 S1

目的和一些前言:

  1. 介绍使用espress创建 web服务的流程。
  2. 介绍中间件、路由、请求对象、响应对象。
    1.middlewar,routing(or router),request object and response object.
  3. 上述操作都使用Typescript完成,这样会极大降低JavaScript程序的复杂程度。

初始化项目,安装依赖和 Typescript环境配置

请 确定你已经安装了合适版本的node.js(简称node)。

//初始化node 项目
npm init 
// 安装依赖项目 也就是 Typescript express 和 ts-node
npm install typescript express ts-node
// 因为express 只使用了JavaScript,需要安装配套的 类型声明
npm i @types/express -D

以上的三行命令,都需要在命令行进行操作,这是使用node创建项目的最小化的基本流程,也就是初始化,然后安装依赖。注意,即使这是整个整个项目的第一小步,你还是可能遇到很大的问题。但是也有极大可能,这不是你的问题。
而是网络问题。

如果网络不通,那么需要npm换源
PS:如果你对依赖管理很陌生,可以先不使用cnpm

Typescript需要配合自带的编译器使用,所以需要配置(最基本)编译选项,还要配置整个项目的入口文件,编译后文件的存放地址等等。这需要在项目根目录创建一个tsconfig.json,配置内容就存放在其中。
当然,更为官方的方式是,在命令行输入tsc --init 这个tsconfig.json文件就会自动生成。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es2016",
    "outDir": "./dist",
    "baseUrl": "./src",
    //  这会让babel 为没有默认导出的模块生成一个默认导出
    "allowSyntheticDefaultImports": true,
    //  是否开启这个选项实际上有一定争议,但我决定先试试看
    "esModuleInterop": true
  },
  "include": [
    // (只)包含src下所有内容
    "src/**/*"
  ],
  "exclude": ["node_modules"]
}

server.ts

node项目的一种惯例是,把源代码放到src文件夹里。

src/server.ts

import express from "express"

const app = express();

app.get('/', (request, response) => {
  response.send('Hello world!');
});

app.listen(5000);

  • express 函数会创建一个对象,我们使用这个对象提供的各种功能来创建网络服务器
  • get的功能,是当服务器接收了发送到 "/"路径的请求,一个对应的回调函数会被调用
    • 注意get的两个参数 路径,被绑定到路径的回调函数
  • request中包含了客户端请求 的 信息,response中包含了 服务端要发送回客户端的信息
  • response.send 的功能就是明确告诉express把 响应 发回到客户端
  • app.listen的功能,是让express服务器监听某个端口

很明显,express是一个函数,调用这个函数返回一个对象。又很明显,app.get,app.listen也是函数,它们都有不同的功能,但是app.get 和 路径 有明确关联,一般我们都把形如此类的函数 叫做 路由(器)

中间件 middleware

这是一个函数,前两个参数和路由的回调函数一样,第三个参数是next,是一个函数。形如next() 的调用结束当前中间件的调用,并继续执行下一个中间件(如果有),而路由也是一种中间件。
src/server.ts

import express from "express";

const app = express();

function someMiddlewar(req, res, next) {
  console.log("prove that i'm being called");
  next();
}
app.use(someMiddlewar);
app.get("/", (request, response) => {
  response.send("Hello world!");
});

app.listen(5000);

上一篇:Linux kernel TCP smoothed-RTT estimation


下一篇:c++11新特性