1. 写在前面

最近在学Typescript 不论是前端·Vue还是后端的Node都在向Typescript的写法过渡，一方面是因为Typescript·的一些特性，能让我们在开发中减少Bug出现的概率，最重要的一方面是因为：Ts写起来简直不要太爽。这篇文章主要是记录我在搭建Koa（Ts版）模板的过程，这个模板是装饰器风格的模板，希望能帮助到阅读到这篇文章的你。

模板地址： https://github.com/q389491729/koa-ts

2. 为什么要搭建模板

搭建模板说白了就是减少重复工作，每次要开一个Node服务时我们都需要从初始化package.json文件到一步一步安装开发运行依赖，再到程序的初始化。这些工作都很麻烦，最主要的是这些工作只用做一次就好了。我这里建议大家可以自己搭建符合自己的开发模板，不一定要用别人的，适合自己的才是最好的。当模板比较多的时候我们可以选择搭一个脚手架，通过命令行的形式选择自己的模板。脚手架的搭建过程会在后面放出来。

3. 模板结构

|– koa-ts

|– config //项目的配置文件夹

| |– index.ts

|– controllers //控制器

| |– homeController.ts

| |– index.ts

| |– userController.ts

|– models // 模型

| |– index.ts

|– public //公共资源

| |– index.ts

| |– image

|– types // 说明文件

| |– index.ts

|– utils // 存放工具函数的文件夹

| |– index.ts

|– app.ts // 入口文件

|– handle-public.js // 打包时将public复制到dist目录

|– package.json

|– README.md

|– tsconfig.json

4. 目录说明

config：存放项目的配置信息，我习惯将各个配置文件分开，然后导入index.ts，再通过index.ts导出，配置分为开发配置和生产环境的配置

typescript

// config/index.ts
// process.env.NODE_ENV ? 
const devConfig = {
  name: 'Koa-ts 模板',
  port: 3000,
  host: 'localhost'
}

const proConfig = {
  name: 'Koa-ts 模板',
  port: 3000,
  host: 'http://xxx.xx.xx'
}

export = process.env.NODE_ENV ? devConfig : proConfig

controllers: 存放路由以及控制器。

|– controllers //控制器

| |– homeController.ts

| |– index.ts

| |– userController.ts

这里可以把每个模块对应的控制器分成文件夹然后导导index.ts中再导出，路由用了装饰器，路由和控制器二合一。其实也可以把控制器中的方法提取出来，放入到一个service文件夹中，这样开发时只用注意service文件夹即可。

typescript

// homeController.ts
import { Controller, Get} from "routing-controllers";

let html = `
  <div style="pading: 20px;margin: 30px auto;width: 75%;"> 
    <h3> 装饰器风格的Koa2模板 </h3>
    <h4> 装饰器文档地址：<a href="https://github.com/typestack/routing-controllers#installation" target="_blank">routing-controllers</a></h4>
  </div>
  `
@Controller()
export default class homeController {
    @Get("/")
    index(){
       return html;
    }
}

// userController.ts
import {Controller, Param, Body, Get, Post, Put, Delete} from "routing-controllers";

@Controller()
export default class UserController {

    @Get("/users")
    getAll() {
       return `<h1>Hello Koa2</h1>`;
    }

    @Get("/users/:id")
    getOne(@Param("id") id: number) {
       return "This action returns user #" + id;
    }

    @Post("/users")
    post(@Body() user: any) {
       return "Saving user...";
    }

    @Put("/users/:id")
    put(@Param("id") id: number, @Body() user: any) {
       return "Updating a user...";
    }

    @Delete("/users/:id")
    remove(@Param("id") id: number) {
       return "Removing user...";
    }

}

// index.ts
import userController from './userController'
import homeController from './homeController'

export default [
  userController,
  homeController,
]

models: 存放模型文件，这里只放了一个文件夹占位，每次项目选用的数据库不同，也不好统一配置。后面的做了脚手架后会将常用的数据库配置以前放在选项中。

public：放静态资源。

types: 存放自己写的Ts说明文件。

utils：存放工具函数。

typescript

// app.ts 入口文件
import "reflect-metadata"; 
import { createKoaServer } from "routing-controllers";
import controllers from "./controllers";
import Static = require("koa-static");
import Logger = require("koa-logger");
import config from './config'
const app = createKoaServer({
   controllers
});
// 设置静态资源目录
app.use( Static(__dirname + '/public/image') );
// 请求日志信息
app.use( Logger() );
app.listen( config.port ,() => {
   console.log( `[${config.name}] 启动成功，http://${ config.host }:${ config.port }` )
});

Code

// handle-public.js 打包时将public文件夹复制到dist目录
const shell = require('shelljs')
shell.cp('-R',"./public/","./dist/")

json

{
  "name": "koa-ts",
  "version": "1.0.0",
  "description": "koa2模板",
  "scripts": {
    "start": "npm run serve",
    "serve": "node ./dist/app.js",
    "build": "tsc && node handle-public.js",
    "dev": "cross-env NODE_ENV=development nodemon -e ts,tsx --exec 'ts-node' ./app.ts"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/q389491729/koa-ts.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/q389491729/koa-ts/issues"
  },
  "homepage": "https://github.com/q389491729/koa-ts#readme",
  "devDependencies": {
    "@types/koa": "^2.0.49",
    "@types/koa-logger": "^3.1.1",
    "@types/koa-static": "^4.0.1",
    "@types/node": "^12.7.4",
    "@types/koa-bodyparser": "^4.3.0",
    "@types/koa-router": "^7.0.42",
    "cross-env": "^5.2.1",
    "nodemon": "^1.19.2",
    "shelljs": "^0.8.3",
    "ts-node": "^8.3.0",
    "typescript": "^3.6.3"
  },
  "dependencies": {
    "koa": "^2.8.1",
    "koa-bodyparser": "^4.2.1",
    "koa-logger": "^3.2.1",
    "koa-multer": "^1.0.2",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "reflect-metadata": "^0.1.13",
    "routing-controllers": "^0.7.7"
  }
}

开发时： npm run dev 。支持热更新

打包上线：npm run build 。

如果使用自动构建上传工具需要自行额外配置。

5. 怎么使用

从github上克隆下来，安装依赖，运行。

shell

git clone https://github.com/q389491729/koa-ts
cd koa-ts
npm install
npm run dev

打开浏览器输入： localhost:3000 ，出现以下画面即为成功。