如何用TypeScript重构Koa框架以提升开发效率？

本文共计1482个文字，预计阅读时间需要6分钟。

%E5%BC%BA%E7%B1%BB%E5%9E%8B%E7%9A%84 TypeScript %E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C%E5%92%8C%E7%BB%B4%E6%8A%A4%E9%A1%B9%E7%9B%AE%E4%B8%8A%E7%9B%B8%E6%AF%94 JavaScript %E6%9C%89%E7%9D%80%E6%98%8E%E6%98%BE%E7%9A%84%E4%BC%98%E5%8A%BF%EF%BC%8C%E9%82%A3%E4%B9%88%E5%AF%B9%E5%B8%B8%E7%94%A8%E7%9A%84%E8%84%9A%E6%89%8B%E6%9E%B6%E8%BF%9B%E8%A1%8C%E6%94%B9%E9%80%A0%E4%B9%9F%E5%B0%B1%E5%8A%BF%E5%9C%A8%E5%BF%85%E8%A1%8C%E4%BA%86%E3%80%82%E6%8E%A5%E4%B8%8B%E6%9D%A5%E5%BC%80%E5%A7%8B%E5%AF%B9%E5%9F%BA%E4%BA%8E koa %E6%A1%86%E6%9E%B6%E7%9A%84 node %E5%90%8E%E7%AB%AF%E8%84%9A%E6%89%8B%E6%9E%B6%E8%BF%9B%E8%A1%8C%E6%94%B9%E9%80%A0%EF%BC%9A%E9%A1%B9%E7%9B%AE%E5%BC%80%E2%80%9D

强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势，那么对常用的脚手架进行改造也就势在必行了。

接下来开始对基于 koa 框架的 node 后端脚手架进行改造：

1. 项目开发环境 和 typescript 编译环境的搭建；
2. 对 node、koa、koa中间件和使用到的库 添加类型化支持；
3. 基于 typesript 的特性改造项目。

项目开发环境搭建

基于 gulp 搭建开发编译环境，gulp-typescript 插件用于编译 typescript 文件， gulp-nodemon 则可以监控文件内容的变更，自动编译和重启node服务，提升开发效率。

npm install -D gulp gulp-nodemon gulp-typescript ts-node typescript

gulp 的配置

gulpfile.js 的设置

const { src, dest, watch, series, task } = require('gulp'); const del = require('del'); const ts = require('gulp-typescript'); const nodemon = require('gulp-nodemon'); const tsProject = ts.createProject('tsconfig.json'); function clean(cb) { return del(['dist'], cb); } // 输出 js 到 dist目录 function toJs() { return src('src/**/*.ts') .pipe(tsProject()) .pipe(dest('dist')); } // nodemon 监控 ts 文件 function runNodemon() { nodemon({ inspect: true, script: 'src/app.ts', watch: ['src'], ext: 'ts', env: { NODE_ENV: 'development' }, // tasks: ['build'], }).on('crash', () => { console.error('Application has crashed!\n'); }); } const build = series(clean, toJs); task('build', build); exports.build = build; exports.default = runNodemon;

typescript 的配置

tsconfig.json 的设置

{ "compilerOptions": { "baseUrl": ".", // import的相对起始路径 "outDir": "./dist", // 构建输出目录 "module": "commonjs", "target": "esnext",// node 环境支持 esnext "allowSyntheticDefaultImports": true, "importHelpers": true, "strict": false, "moduleResolution": "node", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "noUnusedParameters": true, "noUnusedLocals": true, "noImplicitReturns": true, "experimentalDecorators": true, // 开启装饰器的使用 "emitDecoratorMetadata": true, "allowJs": true, "sourceMap": true, "paths": { "@/*": [ "src/*" ] } }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "dist" ] }

eslint 的配置

当然 eslint 也要添加对 typescript 对支持

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.json 的设置

{ "env": { "es6": true, "node": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "@typescript-eslint" ], "rules": { "indent": [ "warn", 2 ], "no-unused-vars": 0 } }

package.json 运行配置

最后就是设置 package.json 的 scripts

"scripts": { "start": "gulp",// dev "build": "gulp build", // output "eslint": "eslint --fix --ext .js,.ts src/", "server": "export NODE_ENV=production && node dist/app" // production server },

添加类型化支持

项目主要使用到了以下的组件

jsonwebtoken
koa
koa-body
koa-compress
koa-favicon
koa-logger
koa-router
koa-static
koa2-cors
log4js

那么就要安装对应的 type 文件，当然别忘了 @types/node

npm install -D @types/jsonwebtoken @types/koa @types/koa-compress @types/koa-favicon @types/koa-logger @types/koa-router @types/koa-static @types/koa2-cors @types/log4js @types/node

使用 typescript 装饰器 改造项目

.net mvc 框架有个很便利的地方就是 使用装饰器对控制器进行配置，现在通过 typescript 的装饰器也可以实现相同的功能。这里需要使用到反射相关的库 reflect-metadata，用过 Java 或 C# 的小伙伴，对反射的原理一定不陌生。

定义http请求的装饰器

我们再也不需要在路由配置和控制器方法之前来回查找和匹配了

import 'reflect-metadata' import { ROUTER_MAP } from '../constant' /** * @desc 生成 http method 装饰器 * @param {string} method - http method，如 get、post、head * @return Decorator - 装饰器 */ function createMethodDecorator(method: string) { // 装饰器接收路由 path 作为参数 return function httpMethodDecorator(path: string) { return (proto: any, name: string) => { const target = proto.constructor; const routeMap = Reflect.getMetadata(ROUTER_MAP, target, 'method') || []; routeMap.push({ name, method, path }); Reflect.defineMetadata(ROUTER_MAP, routeMap, target, 'method'); }; }; } // 导出 http method 装饰器 export const post = createMethodDecorator('post'); export const get = createMethodDecorator('get'); export const del = createMethodDecorator('del'); export const put = createMethodDecorator('put'); export const patch = createMethodDecorator('patch'); export const options = createMethodDecorator('options'); export const head = createMethodDecorator('head'); export const all = createMethodDecorator('all');

装饰控制器的方法

export default class Sign { @post('/login') async login (ctx: Context) { const { email, password } = ctx.request.body; const users = await userDao.getUser({ email }); // ... return ctx.body = { code: 0, message: '登录成功', data }; } @post('/register') async register (ctx: Context) { const { email, password } = ctx.request.body; const salt = makeSalt(); // ... return ctx.body = { code: 0, message: '注册成功！', data } } }

收集元数据和添加路由

我们已经把装饰器添加到对应控制器的方法上了，那么怎么把元数据收集起来呢？这就需要用到 node 提供的 fs 文件模块，node服务第一次启动的时候，扫描一遍controller文件夹，收集到所有控制器模块，结合装饰器收集到的metadata，就可以把对应的方法添加到 koa-router。

import 'reflect-metadata' import fs from 'fs' import path from 'path' import { ROUTER_MAP } from './constant' import { RouteMeta } from './type' import Router from 'koa-router' const addRouter = (router: Router) => { const ctrPath = path.join(__dirname, 'controller'); const modules: ObjectConstructor[] = []; // 扫描controller文件夹，收集所有controller fs.readdirSync(ctrPath).forEach(name => { if (/^[^.]+?\.(t|j)s$/.test(name)) { modules.push(require(path.join(ctrPath, name)).default) } }); // 结合meta数据添加路由 modules.forEach(m => { const routerMap: RouteMeta[] = Reflect.getMetadata(ROUTER_MAP, m, 'method') || []; if (routerMap.length) { const ctr = new m(); routerMap.forEach(route => { const { name, method, path } = route; router[method](path, ctr[name]); }) } }) } export default addRouter

最后

这样对koa项目脚手架的改造基本完成，源码请查看koa-server

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。