Typescript express 新手教程 S1 环境配置 hello world
本教程最终解释权归斯温所有,如果你不认同他的解释,他会给你一记风暴之拳
原文来自 博主wanago
Typescript express 新手教程 S1
目的和一些前言:
- 介绍使用express创建 web服务的流程。
- 介绍中间件、路由、请求对象、响应对象。
1.middleware,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);
顺便顺便 MVC 定义在此
Model
The central component of the pattern. It is the application's dynamic data structure, independent of the user interface. It directly manages the data, logic and rules of the application.
View
Any representation of information such as a chart, diagram or table. Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.
Controller
Accepts input and converts it to commands for the model or view.
In addition to dividing the application into these components, the model–view–controller design defines the interactions between them.
The model is responsible for managing the data of the application. It receives user input from the controller.
The view renders presentation of the model in a particular format.
The controller responds to the user input and performs interactions on the data model objects. The controller receives the input, optionally validates it and then passes the input to the model.
As with other software patterns, MVC expresses the "core of the solution" to a problem while allowing it to be adapted for each system. Particular MVC designs can vary significantly from the traditional description here.