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

Question

我正在处理一个带有 Node.js、Express.js 和 TypeScript 后端（REST API）和一个 React、Redux 和 TypeScript 前端的项目。

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

模型/产品.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。但这真的是一个好方法吗？有人知道实现这种结构的更好方法吗？

Answer 1

您可以使用 TypeScript路径映射。

我是作者的项目示例：SampleTypes.ts
中的后端定义类型被重用在客户端以避免重复代码。

{
  "compilerOptions": {
    "paths": { "@backend/*": ["../server/src/api/*"], },
  }
}

import { SampleRequest } from "@backend/types/SampleTypes";

这是可行的，但确实意味着 api 和客户端 src 树不能用作独立的 docker 上下文，因为 `client` 的上下文无法查看 `../server`。（现在我只是将上下文提升了一个级别，但这并不理想？） (6认同)
使用 create-react-app 不可能包含客户端目录之外的内容。也许服务器可以在*客户端*中包含内容，但我已经看到 tsc 命令然后构建客户端和服务器项目...... (3认同)

Answer 2

您本质上是希望在多个包之间共享代码（在您的案例类型定义中）。Yarn 开发了工作空间Yarn为此

这是一次深入的研究，需要对 Yarn 配置进行一些工作，并可能使用 Lerna 等工具。然而，当您有共享类型的紧密耦合的包时，它确实有意义，但也许还有验证逻辑。