在客户端和服务器之间共享类型

Posted 2023-02-26

技术标签:

【中文标题】在客户端和服务器之间共享类型【英文标题】：Share types between client and server 【发布时间】：2021-03-10 16:40:48 【问题描述】：

我正在开发一个包含 Node.js、Express.js 和 TypeScript 后端 (REST API) 以及 React、Redux 和 TypeScript 前端的项目。

在后端我创建了一些类型，例如：

models/Product.ts

export type Product = 
    title: string
    description: string
    price: number

因此 REST API 正在发送如下响应：


  "data": [
     "title": "Shoe", "Description": "This is a shoe.", "price": 20,
     ...
   ] // inside here all the Products[]

在客户端上，我想将 data 转换为 Product 数组类型。但是由于前端和后端是不同的代码库并且是分开的，我还是想利用前端使用类型的优势。但我想在不重复代码的情况下实现这一点。所以我不想在修改或添加模型时更新2个地方。

有人知道的最佳方式是什么吗？

我正在考虑在后端创建一个端点之类的东西客户端可以点击，然后它将所有模型写入一个文件中例如客户端上的models.ts。所以我认为我需要遍历后端/models/中的每个文件，然后将其解析为一个新文件，该文件作为models.ts写在客户端上。但这真的是一个好方法吗？有人知道实现这种结构的更好方法吗？

【问题讨论】：

这里可以回答***.com/questions/66529067/… 【参考方案1】：

这样做的一个好方法是使用这种共享类型创建一个 npm 私有包。您可以利用这一点，还可以共享辅助函数、可以不重复的逻辑等等。

https://docs.npmjs.com/creating-and-publishing-private-packages https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

【讨论】：

不幸的是，私有 npm 包仅在付费计划中可用。【参考方案2】：

你可以使用 TypeScript path mapping。

示例：SampleTypes.ts 内的后端定义类型为 client 项目中的 reused，以避免重复代码。我是作者。

【讨论】：

【参考方案3】：

把这个留在这里，以便我以后在谷歌上搜索 - https://trpc.io/

【讨论】：