YamlBox

指南文章·阅读 6 分钟

从 JSON 生成说真话的 TypeScript 类型

JSON 到 TypeScript 步骤通常首先将 API 响应复制到编辑器中并手写一个界面 - 这是一项隐藏大风险的小任务:您编写的类型描述了您看到的一个响应,而不是您的用户将触发的响应。

已更新

JSON 到 TypeScript:从代表性有效载荷开始,而不是幸运有效载荷

生成器只能推断样本显示的内容。获取包含尴尬情况的响应:存在可选字段的记录和不存在可选字段的记录、空值、空数组、小数。一份好的样品胜过五份干净的样品。

可选字段来自数组

给定一个对象,每个键看起来都是必需的。给定一个对象数组,生成器可以比较项目:某些项目中缺少的键是可选的(键?:字符串),并且需要到处存在的键。这就是为什么粘贴一系列记录会产生比粘贴一条记录更好的类型。

诚实地模型空值

                // One sample with "deleted_at": null and one with a date
interface User {
  id: number;
  deleted_at: string | null;   // not string, not optional
}
              

null 和 undefined 是不同的东西。可空字段存在空值;可选字段可能完全不存在。崩溃这两个的生成器会产生在错误时进行类型检查的接口 - 这是最昂贵的错误,因为编译器停止警告您。

工会击败任何

当一个字段在一条记录中是字符串而在另一条记录中是数字时(存在混乱的 API),诚实的类型是 string |数字。回退到任何或未知的状态都会使编译器保持沉默,并将故障推向生产环境。报告工会的生成器至少记录了现实,然后您可以询问 API 团队原因。

类型是编译时的;在运行时验证

  • TypeScript 在运行时消失。没有什么可以阻止格式错误的有效负载以您的界面禁止的形状到达。
  • 使用生成的类型来描述您的期望,并在数据进入应用程序的边界处使用运行时验证器(Zod、Valibot 或带有 AJV 的 JSON 模式)。
  • 从同一示例生成 JSON 模式可为您提供一半的运行时间 — 模式验证、接口文档。

保持类型重新生成,而不是重新键入

手写类型从API开始漂移。将生成器视为工作流程中的一个步骤:粘贴新响应,重新生成,粘贴到类型文件中,然后让编译器向您显示 API 更改的每个位置。它是目前最便宜的 2 漂移探测器,只需 30 秒。

使用 JSON 到 TypeScript 生成器进行尝试 — 接口或类型输出、检测到可选键、保留联合。