使用typescript改造koa開發框架

時間 2020-02-05

標籤使用 typescript 改造 koa 開發框架简体版

原文原文鏈接

強類型的 TypeScript 開發體驗和維護項目上相比 JavaScript 有着明顯的優點，那麼對經常使用的腳手架進行改造也就勢在必行了。java

接下來開始對基於 koa 框架的 node 後端腳手架進行改造：node

項目開發環境和 typescript 編譯環境的搭建；
對 node、koa、koa中間件和使用到的庫添加類型化支持；
基於 typesript 的特性改造項目。

項目開發環境搭建

基於 gulp 搭建開發編譯環境，gulp-typescript 插件用於編譯 typescript 文件， gulp-nodemon 則能夠監控文件內容的變動，自動編譯和重啓node服務，提高開發效率。git

npm install -D gulp gulp-nodemon gulp-typescript ts-node typescript
複製代碼

gulp 的配置

gulpfile.js 的設置es6

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 的設置github

{
  "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 對支持web

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
複製代碼

.eslintrc.json 的設置typescript

{
  "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 的 scriptsnpm

"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
  },
複製代碼

添加類型化支持

項目主要使用到了如下的組件json

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
複製代碼