TypeScript 结合 egg.js 基本使用

小小又进入了学习状态，此时小小由于最近接触了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;

// 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{

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) => {

// 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;

// 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,

};

};

读取效果如下

小明菜市场

推荐阅读

●学习 | Node.js 之定时任务

●学习 | MongoDB 索引和排序

●学习 | Docker 从入门到精通 第二季

●学习 | Docker 从入门到精通