1.4 koa2改造为TS项目

一、安装相关依赖

npm install tslint typescript -g
npm install @types/koa-logger @types/koa-router @types/koa-views -g
npm install nodemon  ts-node -g

二、配置package.json的script

 "scripts": {
    "start": "npm run serve",
    "serve": "nodemon src/bin/www.ts --config nodemon.json",
    "build": "npm run tslint && npm run build-ts",
    "build-ts": "tsc",
    "watch": "npm run tslint && npm run watch-ts",
    "watch-ts": "tsc -w",
    "tslint": "tslint -c tslint.json -p tsconfig.json"
  }

三、根目录创建nodemon.json并配置

{
  "restartable": "rs",
  "verbose": true,
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["node_modules/**/node_modules"],
  "execMap": {
    "js": "node --harmony"
  }
}

四、根目录创建并配置tslint.json

{
  "rules": {
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "indent": [
      true,
      "spaces",
      2
    ],
    "one-line": [
      true,
      "check-open-brace",
      "check-whitespace"
    ],
    "no-var-keyword": true,
    "quotemark": [
      true,
      "single",
      "avoid-escape"
    ],
    "semicolon": [
      true,
      "always",
      "ignore-bound-class-methods"
    ],
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-module",
      "check-separator",
      "check-type"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      },
      {
        "call-signature": "onespace",
        "index-signature": "onespace",
        "parameter": "onespace",
        "property-declaration": "onespace",
        "variable-declaration": "onespace"
      }
    ],
    "no-internal-module": true,
    "no-trailing-whitespace": true,
    "no-null-keyword": true,
    "prefer-const": true,
    "jsdoc-format": true
  }
}

五、执行tsc --init生成tsconfig.json，放开相关配置

{
  "compilerOptions": {

    "target": "es2017",
    "module": "commonjs",
    "allowJs": true,
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules",
    "build"
  ],
  "include": [
    "*.ts",
    "src/*.ts",
    "src/**/*.ts"
  ]
}

六、将routes目录、bin目录、app.js文件移动到src目录下，并改写js文件为ts

//app.ts
import Koa from 'koa'; // 导入koa
import KoaLogger from 'koa-logger'; // 导入日志
import path from 'path';
const views = require('koa-views');
const app = new Koa(); // 新建一个koa对象
const routerUser = require('./routes/users');
const routerIndex = require('./routes/index');
const logger = KoaLogger();

app.use(logger);
// 必须在router上
const staticPath = path.join(__dirname, '../public'); // 静态地址
const viewsPath = path.join(__dirname, '../views'); // 模板地址
app.use(require('koa-static')(staticPath));
app.use(views(viewsPath, {
  extension: 'pug'
}));
app.use(routerIndex.routes());
app.use(routerUser.routes());

// 监听8080端口
// app.listen(8080, () => {
//   console.log('server running on http://localhost:8080');
// });
module.exports = app;

//index.ts
import Router from 'koa-router';
const router = new Router();

router.get('/', async (ctx: any) => {
  await ctx.render('index', {
    title: 'Hello Koa!'
  });
});

router.get('/string', async (ctx: any) => {
  ctx.body = 'koa2 string';
  ctx.status = 200;
});

router.get('/json', async (ctx: any) => {
  ctx.body = {
    title: 'koa2 json'
  };
});

module.exports = router;

//users.ts
import Router from 'koa-router';
const router = new Router();

router.prefix('/users');

router.get('/', function (ctx: any) {
  ctx.body = 'this is a users response!';
});

router.get('/bar', function (ctx: any) {
  ctx.body = 'this is a users/bar response';
});

module.exports = router;

//www.ts
#!/usr/bin/env node

/**
 * Module dependencies.
 */

const app = require('../app');
const debug = require('debug')('demo:server');
const http = require('http');

/**
 * Get port from environment and store in Express.
 */

const port = normalizePort(process.env.PORT || '8080');
// app.set('port', port);

/**
 * Create HTTP server.
 */

const server = http.createServer(app.callback());

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port, () => {
  console.log('server running on http://localhost:8080');
});
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val: any) {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error: any) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  const bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  const addr = server.address();
  const bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

这里www.ts是作为程序的入口，如果想使用app.ts作为程序的入口的话，可以把app.ts稍作修改，

删除了module.exports = app;并且在app.ts使用了监听，bin目录就可以删掉了

import Koa from 'koa'; // 导入koa
import KoaLogger from 'koa-logger'; // 导入日志
import path from 'path';
const views = require('koa-views');
const app = new Koa(); // 新建一个koa对象
const routerUser = require('./routes/users');
const routerIndex = require('./routes/index');
const logger = KoaLogger();

app.use(logger);
// 必须在router上
const staticPath = path.join(__dirname, '../public'); // 静态地址
const viewsPath = path.join(__dirname, '../views'); // 模板地址
app.use(require('koa-static')(staticPath));
app.use(views(viewsPath, {
  extension: 'pug'
}));
app.use(routerIndex.routes());
app.use(routerUser.routes());

// 监听8080端口 
app.listen(8080, () => {
   console.log('server running on http://localhost:8080');
 });

如果想要把public\views静态文件也放到src下面，只需改变下面两行代码的路径即可

const staticPath = path.join(__dirname, '../src/public'); // 静态地址
const viewsPath = path.join(__dirname, '../src/views'); // 模板地址

七、当前nodemon是只对src下ts做了监控，也可以改为对build文件下做监控，手工重启，直接输入rs即可

八、测试一下效果

//执行
npm start

另外开一个terminal

//执行
npm run watch

修改index.ts下body的内容，刷新页面，自动更新了

再查看一下build/routes/index.js，tsc也自动编译了