在API和前端之间共享接口

时间:2019-03-01 09:12:26

标签: angular git typescript nestjs

我正在发展双方。 API在nest.js中,前端在Angular中。双方都使用打字稿,我面临共享接口的问题,应该相同。例如,ILoginRequest和ILoginResponse。我想将两个项目都放在单独的GIT存储库中。我应该将GIT子模块与第3个共享的GIT存储库一起使用,还是以某种方式创建共享的npm软件包,或者是否有一些不错的工具来自动(从摇摇欲坠的定义)生成类到前端或其他任何东西?

3 个答案:

答案 0 :(得分:2)

注意:我最近偶然发现typeorm-entitysharer,它“可用于基于相同的TypeORM实体创建客户端/服务器类,从而使您可以共享它们。”它使您可以更好地控制要共享的内容,可以看一下它们的示例。我没有选择使用它,因为我猜这对我来说有点过头了。但是,这就是我构造上一个项目的方式:


我的前端和后端位于一个存储库中,但是我想您可以将它们分开,但是仍然需要以某种方式使它们彼此相邻。文件结构将如下所示:

workspace
  ├─backend        <- repo #1
  │   ├─src
  │   │   ├─shared <- shared code goes here
  │   │   └─proxy.ts
  │   └─tsconfig.json
  └─frontend       <- repo #2
      ├─src
      │   └─proxy.ts
      └─tsconfig.json

然后在backend/tsconfig.json中介绍

{
    ...
    "paths": {
        "@shared/*": [ "src/shared/*" ],
    }
}

然后在frontend/tsconfig.json中进行介绍

{
    ...
    "paths": {
        "@shared/*": [ "../backend/src/shared/*" ],

        // if you're using TypeORM, this package has dummy decorators
        "typeorm": [ "node_modules/typeorm/typeorm-model-shim.js" ]
        // you can do the same for other packages, point them to dummy paths

        // altirnatively you can route the shared imports through the proxy.ts
        // and replace them in frontend/src/proxy.ts with dummy ones
    }
}

不要忘记在前端npm i typeorm

示例

假设我在backend/src/shared/user.entity.ts中有这个

import { PrimaryGeneratedColumn, Column } from 'typeorm';

export class UserEntity
{
    @PrimaryGeneratedColumn() id: number;
    @Column() name: string;
    @Column() password: string;
}

现在,我可以像这样在任何地方使用它:

import { UserEntity } from '@shared/model/user.entity';

显而易见,在后端,在前端,@shared/model/user.entity被映射到../backend/src/shared/model/user.entity,而实体内部的import from 'typeorm'被映射到虚拟包。

答案 1 :(得分:1)

遇到了同样的问题,并研究了一些替代方案。这是我考虑的内容和选择的内容:

  1. 将实体定义分成单独的代码库-可能在不同的git repo中。听到的问题是Nest会使用Angular无法理解的装饰器。那意味着我必须将Nest包含为依赖项,这似乎是一个坏主意,或者创建存根装饰器-浪费时间。拒绝
  2. 创建节点程序包-与#1相同的问题。拒绝
  3. 复制粘贴。后端和前端项目都有一个实体文件夹。后端的实体是用TypeORM装饰器(对我而言)装饰的。我将它们复制到前端的实体目录中,然后将它们转换为 interfaces ,因为您从httpclient库(应符合该接口的对象,而不是类实例)获取的内容。通过

最后,看看评论,我看不到GraphQL在这里有什么帮助,因为您不是在尝试利用现有的界面-希望听到有关此信息的人:)

答案 2 :(得分:0)

在浪费了整整一天的时间使它工作之后,我遇到了NX/NRWL

基本上,它只是一个CLI,具有用于正确构建应用程序的工具。我能够在大约一个小时内使其正常工作。单一存储库中的共享接口是解决之道。