小小又进入了学习状态，此时小小因为最近接触了 js 的相干内容，进而接触了一些 ts 相干的内容，所以小小本次次要学习的内容是 ts。

装置相干依赖

这里装置两个依赖，别离为 egg 和 ts

装置 ts

这里须要确保首先装置了 npm 相干工具。
全局装置 ts

npm install -g typescript

进行全局的测试

$ tsc -v
Version 3.2.2

这样就实现了本地全局的 ts 的装置

装置 egg

这里实现全局装置 egg，并初始化依赖我的项目。
创立工作目录

mkdir showcase && cd showcase

装置相干的依赖

npm init egg --type=ts

装置依赖

 npm i

运行我的项目

npm run dev

呈现以下提醒，即代表曾经启动，并装置实现

C:\Users\Administrator\Desktop\untitled4555\ming>npm run dev

> ming@1.0.0 dev C:\Users\Administrator\Desktop\untitled4555\ming
> egg-bin dev

[egg-ts-helper] create typings\app\controller\index.d.ts (5ms)
[egg-ts-helper] create typings\config\index.d.ts (16ms)
[egg-ts-helper] create typings\config\plugin.d.ts (10ms)
[egg-ts-helper] create typings\app\service\index.d.ts (5ms)
[egg-ts-helper] create typings\app\index.d.ts (2ms)
2020-07-31 14:27:49,701 INFO 12416 [master] node version v13.11.0
2020-07-31 14:27:49,703 INFO 12416 [master] egg version 2.27.0
2020-07-31 14:27:59,512 INFO 12416 [master] agent_worker#1:28076 started (9799ms)
2020-07-31 14:28:10,469 INFO 12416 [master] egg started on http://127.0.0.1:7001 (20
765ms)

拜访页面成果如上

编写控制器

这里编写相应的控制器
控制器目录如下所示

增加绝对应的类的办法

public async show() {const { ctx} = this;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const page = ctx.query.page;
    console.log(page);
    const result = 'ming';
    console.log(result);
    await ctx.render('ming.tpl', result);
  }

增加相干路由

import {Application} from 'egg';

export default (app: Application) => {const { controller, router} = app;

  router.get('/', controller.home.index);
  router.get('/ming', controller.home.show);
};

增加模板渲染插件

编辑默认配置文件

import {EggAppConfig, EggAppInfo, PowerPartial} from 'egg';

export default (appInfo: EggAppInfo) => {const config = {} as PowerPartial<EggAppConfig>;

  // override config from framework / plugin
  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1596175919808_6331';

  // add your egg config in here
  config.middleware = [];

  // add your special config in here
  const bizConfig = {sourceUrl: `https://github.com/eggjs/examples/tree/master/${appInfo.name}`,
  };

  config.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {'.tpl': 'nunjucks',},
  };

  // the return config will combines to EggAppConfig
  return {
    ...config,
    ...bizConfig,
  };
};

增加相干插件

import {EggPlugin} from 'egg';

const plugin: EggPlugin = {
  nunjucks: {
    enable: true,
    package: 'egg-view-nunjucks',
  },
};

export default plugin;

拜访链接

http://127.0.0.1:7001/ming

呈现模板内容

服务层编写

这里配置相干的服务层。

定义相干接口

export interface NewsItem {
  id: number;
  title: string;
}

编写相干的控制器

// 定义相干办法
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  public async list(name: number): Promise<NewsItem[]>{
    name = name;
    return [{id:3, title: "ming"}] ;
  }

在管制层中调用

 public async show() {const { ctx} = this;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const page = ctx.query.page;
    console.log(page);
    const result = 'ming';
    console.log(result);
    await ctx.render('ming.tpl', result);
  }

调用显示后果

此时实现了最根本的服务层的搭建

中间件

中间件个别用于 jwt 验证相干的内容。这里应用 jwt 做前后端的验证。

创立新的中间件目录

import {Context, Application, EggAppConfig} from "egg";

export default function uuidMiddleWare(options: EggAppConfig['uuid'], app: Application): any {return async (ctx: Context, next: () => Promise<any>) => {
    // name 就是 config.default.js 中 uuid 下的属性
    ctx = ctx;
    console.info(options.name);
    await next();};
}

创立相干的配置文件用于中间件读取相干的内容

 config.default.js 
 

import {EggAppConfig, EggAppInfo, PowerPartial} from 'egg';

export default (appInfo: EggAppInfo) => {const config = {} as PowerPartial<EggAppConfig>;

  // override config from framework / plugin
  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1596175919808_6331';

  // add your egg config in here
  config.middleware = ['uuid'];

  // add your special config in here
  const bizConfig = {sourceUrl: `https://github.com/eggjs/examples/tree/master/${appInfo.name}`,
    local: {msg: 'local',},

    uuid: {
      name: 'ebuuid',
      maxAge: 1000 * 60 * 60 * 24 * 365 * 10,
    },
  };

  config.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {'.tpl': 'nunjucks',},
  };

  // the return config will combines to EggAppConfig
  return {
    ...config,
    ...bizConfig,
  };
};

读取成果如下