在 Typescript 项目之间共享接口

Posted

技术标签:

【中文标题】在 Typescript 项目之间共享接口【英文标题】:Sharing interfaces between Typescript projects 【发布时间】:2020-09-03 01:22:34 【问题描述】:

我正在开发两个项目(一个 Angular 客户端和一个 NestJS 服务器),它们最终使用相同的接口,比如用户、产品等。

我正在寻找一种不在两个项目中复制这些接口文件的方法,而是让一个共享项目托管共享代码并由具有自己构建设置的服务器和客户端项目引用。

你有什么提示吗?谢谢!

【问题讨论】:

为声明和类型创建另一个存储库,并使用 npm install 在您的两个项目中使用此存储库。 您可以创建一个monorepo,并将所有共享接口存储在一个包中,也可以为接口创建一个单独的repo并将其导出为NPM包 【参考方案1】:

建立一个新的“通用”打字稿库存储库,其中包含所有系统范围的接口和功能。版本并将这个公共库发布到 npm 以便于访问

那么客户端和服务器项目都应该npm install mycommonlibrary

在本地开发过程中,您应该使用npm link同时开发和调试公共库、客户端和服务器

意见建议:按照上述模式,我发现以下策略很有用:在公共库中编写您应用的所有“业务逻辑”,以及您的模拟和测试代码——这非常灵活:例如,您可以采用通常的服务器端业务逻辑,然后在客户端运行它,连接数据库的模拟,以便你可以像这样同构地锻炼你的大部分系统,这很漂亮

【讨论】:

我关注了这个视频,说明了你的建议youtube.com/watch?v=jJNIuBTAb6Q谢谢!【参考方案2】:

我刚刚看了一篇关于这个案例的文章,我认为它会帮助你解决问题,

在那篇文章中,他们将结合 Angular 和 NestJS,并学习如何利用 Nx monorepo 中的代码共享...... sharing made easy in full-stack app with NX, angular and nestjs

【讨论】:

【参考方案3】:

如果您对两个项目都使用一个存储库:我会在服务器中定义共享接口并在客户端中使用import type

如果接口不在单个存储库中,我不会共享接口。

【讨论】:

【参考方案4】:

另一种方法是使用所有常见资产创建第三个项目。您可以从两个项目中引用它的 *.d.ts。

【讨论】:

以上是关于在 Typescript 项目之间共享接口的主要内容,如果未能解决你的问题,请参考以下文章

在 TypeScript 项目之间共享代码(使用 React)?

MODULE_NOT_FOUND 尝试在 Node JS / TypeScript 项目中的模块之间按目录共享代码

TypeScript 类与同名接口之间的关系

使用 Typescript 在 Angular 2 中的组件之间共享行为

在后端、react 和 react-native 客户端之间共享 typescript 代码

Typescript 使用具有严格值的接口