使用typescript改造koa开发框架
<p>原文地址：使用typescript改造koa开发框架<br>强类型的 <strong>TypeScript</strong> 开发体验和维护项目上相比 <strong>JavaScript</strong> 有着明显的优势，那么对常用的脚手架进行改造也就势在必行了。</p>
<p>接下来开始对基于 <strong>koa</strong> 框架的 <strong>node</strong> 后端脚手架进行改造：</p>
<ol>
<li>项目开发环境 和 <strong>typescript</strong> 编译环境的搭建；</li>
<li>对 <strong>node</strong>、<strong>koa</strong>、koa中间件和使用到的库 添加类型化支持；</li>
<li>基于 <strong>typesript</strong> 的特性改造项目。</li>
</ol>
<h2 id="项目开发环境搭建">项目开发环境搭建</h2>
<p>基于 <strong>gulp</strong> 搭建开发编译环境，<strong>gulp-typescript</strong> 插件用于编译 <strong>typescript</strong> 文件， <strong>gulp-nodemon</strong> 则可以监控文件内容的变更，自动编译和重启<strong>node</strong>服务，提升开发效率。</p>
<pre><code class="language-bash">npm install -D gulp gulp-nodemon gulp-typescript ts-node typescript
</code></pre>
<h4 id="gulp-的配置">gulp 的配置</h4>
<p>gulpfile.js 的设置</p>
<pre><code class="language-javascript">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;
</code></pre>
<h4 id="typescript-的配置">typescript 的配置</h4>
<p>tsconfig.json 的设置</p>
<pre><code class="language-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"
]
}
</code></pre>
<h4 id="eslint-的配置">eslint 的配置</h4>
<p>当然 <strong>eslint</strong> 也要添加对 <strong>typescript</strong> 对支持</p>
<pre><code class="language-bash">npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
</code></pre>
<p>.eslintrc.json 的设置</p>
<pre><code class="language-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
}
}
</code></pre>
<h4 id="packagejson-运行配置">package.json 运行配置</h4>
<p>最后就是设置 package.json 的 scripts</p>
<pre><code class="language-json">"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
},
</code></pre>
<h2 id="添加类型化支持">添加类型化支持</h2>
<p>项目主要使用到了以下的组件</p>
<ul>
<li>jsonwebtoken</li>
<li>koa</li>
<li>koa-body</li>
<li>koa-compress</li>
<li>koa-favicon</li>
<li>koa-logger</li>
<li>koa-router</li>
<li>koa-static</li>
<li>koa2-cors</li>
<li>log4js</li>
</ul>
<p>那么就要安装对应的 type 文件，当然别忘了 <strong>@types/node</strong></p>
<pre><code class="language-bash">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
</code></pre>
<h2 id="使用-typescript-装饰器-改造项目">使用 typescript 装饰器 改造项目</h2>
<p><strong>.net mvc</strong> 框架有个很便利的地方就是 使用装饰器对控制器进行配置，现在通过 <strong>typescript</strong> 的装饰器也可以实现相同的功能。这里需要使用到反射相关的库 <strong>reflect-metadata</strong>，用过 <strong>Java</strong> 或 <strong>C#</strong> 的小伙伴，对反射的原理一定不陌生。</p>
<h4 id="定义http请求的装饰器">定义http请求的装饰器</h4>
<p>我们再也不需要在路由配置和控制器方法之间来回查找和匹配了</p>
<pre><code class="language-typescript">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');
</code></pre>
<h4 id="装饰控制器的方法">装饰控制器的方法</h4>
<pre><code class="language-typescript">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
}
}
}
</code></pre>
<h4 id="收集元数据和添加路由">收集元数据和添加路由</h4>
<p>我们已经把装饰器添加到对应控制器的方法上了，那么怎么把元数据收集起来呢？这就需要用到 <strong>node</strong> 提供的 <strong>fs</strong> 文件模块，<strong>node</strong>服务第一次启动的时候，扫描一遍controller文件夹，收集到所有控制器模块，结合装饰器收集到的metadata，就可以把对应的方法添加到 <strong>koa-router</strong>。</p>
<pre><code class="language-typescript">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(path, ctr);
})
}
})
}
export default addRouter
</code></pre>
<h2 id="最后">最后</h2>
<p>这样对<strong>koa</strong>项目脚手架的改造基本完成，源码请查看 <em>koa-server</em></p><br><br>
来源：https://www.cnblogs.com/edwardloveyou/p/12259245.html
頁:
[1]