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

提问于 2024-04-20T07:11:10+08:00

浏览次

4

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

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

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

有没有人有这方面的经验？目前我将接口添加到两个文件夹，但这是邪恶的，因为如果我更新一个接口，我也必须替换另一个接口 .

3 回答

4

像Lerna这样的工具有助于这种设置，从经验来看，这是最简单的方法，无需创建任何私有的npm repos（这是另一种选择） .

基本上，您设置角度和服务器包以安装公共包，就像任何其他npm包一样，并运行lerna为每个包创建虚拟链接 . 这样，当您需要intellisense时，编辑器将通过lerna在引导阶段创建的虚拟文件链接，从而允许您创建任意数量的通用包，而无需进行任何繁重的连接以连接所有使用者包 .

回复于 2024-04-20T07:11:10+08:00
3
在TypeScript 3.0中引入了“项目引用” . 这可以帮助你实现你想要的（我用它来分享角度和 Cloud 功能之间的模型）

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

您需要做的是向项目的 tsconfig.json 添加一个外部项目引用，该引用应该重用来自其他地方的文件
```
{
  "compilerOptions": {
    // The usual config
  },
  "references": [
    { "path": "../my-other-project" }
  ]
}
```
回复于 2024-04-20T07:11:10+08:00
3
在你的tsconfig.json中添加 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'
回复于 2024-04-20T07:11:10+08:00

相关问题