TypeScript：重用前端（Angular）和后端的接口和类

Question

我有一个基于前端（Angular）和后端（使用 NestJS 开发 - 所以它是 NodeJS）的当前项目的 monorepo。我想为前端和后端使用自定义接口和类。例如，创建 DTO 以便我的前端知道我的后端的参数。

我想过一个公共文件夹，如下面的项目结构所示，但这不起作用，因为公共文件夹超出了 Angular (tsconfig) 的范围，因此自动完成不起作用

project
├── client (Angular)
├── server (NestJS)
└── common (client and server share specific interfaces and classes)

有人有这方面的经验吗？目前我将我的接口添加到两个文件夹中，但这很糟糕，因为如果我更新一个接口，我也必须替换另一个。

Answer 1

在 TypeScript 3.0 中引入了“项目引用”。这可以帮助你实现你想要的（我用它在角度和云函数之间共享模型）

https://www.typescriptlang.org/docs/handbook/project-references.html

你需要做的是添加一个外部项目引用到项目的tsconfig.json 应该重用其他地方的文件

{
  "compilerOptions": {
    // The usual config
  },
  "references": [
    { "path": "../my-other-project" }
  ]
}

Answer 2

在您的 tsconfig.json 中添加 common 到 paths 属性：

     "paths": {
       "@angular/*": ["node_modules/@angular/*"],
       "rxjs/*": ["node_modules/rxjs/*"],
       "common/*": ["../common/*"]
     }

然后： import myInterface from 'exported interface in common folder';

最好有一个 index.ts 导出所有服务，接口什么的： export * from './myFile'

Answer 3

Lerna 之类的工具有助于进行这种设置，根据经验，这是最简单的方法，无需创建任何私有 npm 存储库（这是另一种选择）。

本质上，您设置 Angular 和服务器包以安装通用包，就像任何其他 npm 包一样，并运行 lerna 为每个包创建虚拟链接。 这样，当您需要它们进行智能感知时，编辑器将通过 lerna 在引导阶段创建的虚拟文件链接，从而允许您创建任意数量的通用包，而无需做任何繁重的工作来连接所有消费者包。