Typescript + Egg实践
发布于 2 年前 作者 junhaotong 5289 次浏览 来自 分享

Egg.js是阿里开源的基于Koa的一个企业级Node框架,具体介绍在这里不做详细说明,想要了解更多可以查看Egg.js文档

*.d.ts

Egg.js搭配Typescript开发的关键就是*.d.ts文件。

Egg.js本身并不是使用Typescript开发,但是它提供了相对应的index.d.ts文件,让你可以使用TS引入Egg。

Egg提供给你它的index.d.ts,但是在工作中,你自己编写的Controller、Service、Helper等,都需要自己编写index.d.ts文件放在typings文件夹下,好在Egg提供了一个工具可以自动分析你的代码生成相对于的d.ts文件,你需要全局安装egg-ts-helper工具:

$ npm install egg-ts-helper -g

安装成功后在你编写完Controller或者Service后,手动执行命令$ ets 或者你可以选择新开一个命令行执行$ ets -w 它可以检测你的文件修改,自动生成对应的d.ts文件。

Controller和Service的编写在文官方档上写的很清晰,也没有什么需要特别注意的点。

Helper

在工作中或者使用Egg写demo的时候,你可能会用到一些util函数,官方推荐写在helper.js中,但是你在实际使用Ts在Helper中写函数的时候,你会碰到一个问题,官方文档中说明,你可以在helper.js中使用this.ctx以及this.app获取Context和Application对象,但是你直接在helper.js中写this.ctx或者this.app的时候,会报异常,这是Egg的自动加载机制导致的,你需要手动在函数中指定this的类型:

import {
     IHelper,
 } from 'egg';
 
 export default {
      test(this: IHelper) {
         const { ctx, app } = this;
      }
 };

这样你就可以在helper.js中愉快的获取ctx和app对象了。

plugin

在使用Egg的插件时,也有一点需要注意,比如我使用egg-redis插件。 plugin.ts

 import { EggPlugin } from 'egg';

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

config.default.ts

// ...
 config.redis = {
    client: {
       port: 6379,
       host: '127.0.0.1',
       password: '',
       db: 0,
    },
 };
 // ...

这时,按照文档说明,你可以在Controller或者Service中使用this.app.redis来操作redis,但实际上会报错,这个问题也是由于redis没有在Application中进行声明导致的,我尝试在typings下的index.d.ts中做声明

typings/index.d.ts

declare module 'egg' {
     interface Application {
         redis;
     }
 }

声明后,可以正常使用this.app.redis,但是我不确定这种方式是否正确~

Model 在实际使用中,免不了操作数据库,我使用的是mongoDB,在plugin和config中配置好egg-mongoose插件后,你需要在你的app文件夹下新增一个model文件夹,在该文件夹下编写你的Model:

app/model/user.ts

 export default (app) => {
     const mongoose = app.mongoose;
     const Schema = mongoose.Schema;
     const userSchema = new Schema({
         mobile: {
             type: String,
             required: true,
         },
         password: {
             type: String,
             required: true,
         },
     });
     return mongoose.model('User', userSchema);
 };

这时,如果你的ets -w 没有关闭的话,在你工程目录的typings文件夹下生成了一个名叫model的文件夹。现在你可以在你的Controller和Service中使用this.ctx.model.User获取到模型对象。

这里需要注意,我不清楚你们是如何开发的,在我使用Egg之前,我习惯在Model中编写对数据库操作的代码,原本我准备在Model中操作数据库,但都以失败而告终,仔细查看文档后发现:

对数据库的访问操作属于Web层中的数据处理层,因此我们强烈建议将这部分代码放在Service层中维护。 在Egg中,推荐在Service中操作数据库,既然这样,我也只能“入乡随俗”啦。

本人只是Node菜鸟,对Egg的了解也不深,有不对的地方希望大神们能指出,求轻喷!感谢!!!

18 回复

我用的时候直接fork了一个egg-redis加上的index.d.ts…

@ipfans 😂真粗暴

@junhaotong egg 重要的是都挂在到 ctx 与 app 上,总不能全部用 any 类型吧?不解决这块感觉没什么意义用 TypeScript 了

@ipfans 为啥不选择给它 PR 一个 index.d.ts 呢

@junhaotong @atian25

// app/router.js
module.exports = app => {
  app.router.post('createPost', '/api/posts', app.controller.sub.post.create);
}

我的问题是不明白 app 属于什么类型? 因为 app 上的 controller 都是动态挂在上去的。

@atian25 谢谢,学到了。 我原来造了一个类似的轮子遇见过这个问题。

@atian25 @junhaotong 说的好,我正在准备PR

楼主你好,我按照官方的typescript文档创建了项目,然后按照 egg-mongoose 文档连接了mongoose,但是我在 Controller 或 Service 里,使用 this.ctx.model. ,typescript并不会提示可使用的 Model 对象,请问你的会有这种情况吗? typings/app/model/index.d.ts 里已经有相关的代码的

egg-ts-helper 还不支持 mongoose,可以 PR 或者自己写 d.ts

@atian25 明白了,谢谢解答

@Gxh-beGreat image.png这个提示么?我没注意哎

@junhaotong 你这是webstorm吧?vscode没有提示。eggjs整体使用很方便,但对ts目前还不够友好

个人觉得egg-ts-helper 不做egg原生约定部分之外的支持是好的,谁知道你model文件夹一定是存mongoose的模型或者entity文件夹一定存一些什么数据库模型,但是egg能保证,你的app、controller、server等肯定放的是那些东西。需要的时候自己在index.d.ts内加一下也不是非常麻烦; 因为egg是很灵活的,自己需要自动化最好还是自己构建。

@atian25 期待大佬的茶叶蛋开源项目,吾等渣渣自己写着写着都懵逼了。

回到顶部