強型別的 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,'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,path } = route;
    router[method](path,ctr[name]);
   })
  }
 })
}

export default addRouter

最後

這樣對koa專案腳手架的改造基本完成，原始碼請檢視koa-server

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。