angular - 在 API 和前端之间共享接口(interface)

Question

我正在发展双方。 API 在 nest.js 中，前端在 Angular 中。双方都使用 typescript ，我面临共享接口(interface)的问题，应该是一样的。例如 ILoginRequest 和 ILoginResponse。我想将这两个项目放在不同的 GIT 存储库中。我应该将 GIT 子模块与第三个共享 GIT 存储库一起使用，还是以某种方式创建共享 npm 包，或者是否有一些好的工具可以自动(从 swagger 定义)生成类到前端或其他任何东西？
编辑:要从 swagger 为客户生成代码，请查看 openapi-generator

Answer 1

注意:我最近偶然发现了 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'实体内部被映射到虚拟包。