本教程最终解释权归斯温所有,如果你不认同他的解释,他会给你一记风暴之拳
Typescript express 新手教程 S1
目的和一些前言:
- 介绍使用espress创建 web服务的流程。
- 介绍中间件、路由、请求对象、响应对象。
1.middlewar,routing(or router),request object and response object. - 上述操作都使用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);