【问题标题】: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写在客户端上。但这真的是一个好方法吗?有人知道实现这种结构的更好方法吗?

【问题讨论】:

标签: typescript server model client


【解决方案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/

    【讨论】:

      猜你喜欢
      • 2016-12-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-05-16
      相关资源
      最近更新 更多