TypeScript 3 + Koajs + Node.js

转发

TypeScript 3 + Koajs + Node.js

自NodeJS早期以来，Express一直是NodeJS开发人员事实上的标准Web框架。
可是，JavaScript在过去几年中已经走过了漫长的道路，像promises和async函数这样的功能使得构建更小，更强大的Web框架成为可能。

Koa就是这样一个框架。
它由Express背后的团队构建，以利用最新的JavaScript和NodeJS功能，特别是异步功能。

与Express和其余node框架（如Hapi）不一样，Koa不须要使用回调。
这消除了难以跟踪的错误的巨大潜在来源，并使框架很是容易为新开发人员选择。

在本文中，我将向您介绍如何使用Koa和TypeScript来开发新的Web应用程序项目

第一步、安装和配置

Koa须要一个具备异步功能支持的Node版本，所以在开始以前确保安装了Node 8.x（或更高版本）。
Node 8将于2017年10月成为新的长期支持版本，所以它是启动新项目的绝佳选择。

咱们如今将建立一个安装了如下内容的新node项目：

1. Koa
2. Koa Router
3. TypeScript
4. TS-Node 和 Nodemon(用于在开发期间自动构建和重启)

为项目建立一个新文件夹，而后执行如下命令：

npm init   # and follow the resulting prompts to set up the project
npm i koa koa-router
npm i --save-dev typescript ts-node nodemon
npm i --save-dev @types/koa @types/koa-router

如今，在项目的根目录中，建立一个新的tsconfig.json文件并添加如下内容：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2017",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "./src/***/*",
    ]
}

请注意，咱们将TypeScript配置为转换为ES2017 - 这可确保咱们利用Node的本机async/await功能。

第二步、建立服务器

因为Koa的核心是微框架，所以启动和运行它很是简单。在项目目录中，建立一个src文件夹，在其中建立一个新文件：server.ts，其中包含如下内容：

import * as Koa from 'koa';
import * as Router from "koa-router";

const app = new Koa();
const router = new Router();

router.get('/*', async (ctx) => {
  ctx.body = "Hi TS";
})

app.use(router.routes());

app.listen(8080);

console.log("Server running on port 8080");

第三步、使用Nodemon和TS-Node运行服务器

在开发过程当中，每次进行更改时都要记住从新启动服务器会很麻烦，因此我想设置个人服务器端项目以自动从新启动代码更改。

为此，咱们将向咱们的项目添加watch-server npm脚本。
为此，请将如下内容添加到package.json的"scripts"部分：

"watch-server": "nodemon --watch 'src/***/*' -e ts,tsx --exec 'ts-node' ./src/server.ts"

如今开始新的TypeScript Koa项目，只需执行如下操做便可

npm run watch-server

您应该看到如下输出：

> ts_node_koa_blog@1.0.0 watch-server /Users/durban/nodejs/ts_node_koa_blog
> nodemon --watch 'src/***/*' -e ts,tsx --exec 'ts-node' ./src/server.ts

[nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: src/***/*
[nodemon] starting `ts-node ./src/server.ts`
Server running on port 8080

如今您应该可以在浏览器中访问http//localhost:8080/ :)

第四步、构建应用程序 - 添加中间件

主要的Koa库只包含基本的HTTP功能。
要构建完整的Web应用程序，咱们须要添加适当的中间件，例如Logging, Error Handling, CSRF Protection等。在Koa中，中间件本质上是一堆函数，经过app.use()建立。
收到Web请求后，它将传递给堆栈中的第一个函数。
该函数能够处理请求，而后可选地将其传递给下一个中间件函数。
让咱们将上面的示例扩展为包含一个中间件函数，该函数将每一个Web请求的URL记录到控制台：

import * as Koa from 'koa';
import * as Router from "koa-router";

const app = new Koa();


app.use(async (ctx, next) => {
  // Log the request to the console
  console.log("Url: ", ctx.url);

  // Pass the request to the next middleware function
  await next();
})

const router = new Router();

router.get('/*', async (ctx) => {
  ctx.body = "Hi TS";
})

app.use(router.routes());

app.listen(8080);

console.log("Server running on port 8080");

在上面的示例中，咱们如今定义两个中间件函数：

1. 第一个中间件函数从请求上下文(ctx.url)获取Url，并使用console.log()将其输出到控制台
2. 而后该函数await next()，告诉Koa将请求传递给堆栈中的下一个中间件函数
3. 第二个中间件函数来自koa-router - 它使用请求的url来匹配咱们经过router.get()配置的路由如今，当您在浏览器中访问http://localhost:8080/时，您应该看到相似于如下内容的输出：

> ts_node_koa_blog@1.0.0 watch-server /Users/durban/nodejs/ts_node_koa_blog
> nodemon --watch 'src/***/*' -e ts,tsx --exec 'ts-node' ./src/server.ts

[nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: src/***/*
[nodemon] starting `ts-node ./src/server.ts`
Server running on port 8080
Url:  /
Url:  /
Url:  /blog
Url:  /blog

第五步、标准中间件

显然，你真的不想为你的网络应用从新发明轮子。
根据您要建立的应用程序类型，如下中间件可能颇有用：

Koa路由器
https://github.com/alexmingoia/koa-router

Koa Body Parser（用于JSON和Form Data支持）
https://github.com/dlau/koa-body

Koa Cross-Site-Request-Forgery（CSRF）预防
https://github.com/koajs/csrf

Koa Examples（许多有用的东西，包括错误处理）
https://github.com/koajs/examples

我已经建立了一个基本的TypeScript和Koa项目。能够进行后面本身感兴趣的开发了。