
JSON 到 TypeScript 转换器读取一个示例 JSON 值 - 一个 API 响应、一个配置文件、一个数据库记录 - 并写入描述它的 TypeScript 接口。嵌套对象成为它们自己的命名接口,对象数组合并到单个元素接口而不是扩大的联合中,并且从某些记录中为空或缺少的键被标记为可选的。你粘贴你已经拥有的数据;你得到的类型是你本来会手写的。
手动键入 API 响应以特定方式繁琐且容易出错:您键入您*认为* 端点返回的内容,而不是实际返回的内容。 您从未注意到的字段被省略,有时为 null 的整数被键入“number”,并且错误在生产中而不是在编辑器中出现。 直接从一个真正的有效负载生成类型会缩小这个差距,因为你编译的形状是服务器实际发送的形状。
Everything都在你的浏览器中运行推理引擎是无依赖的TypeScript,而不是一个远程服务的包装器,所以有效负载- 通常会携带访问令牌,客户记录和内部ID- 永远不会离开页面选择界面或类型别名,切换`导出`关键字和`只读`修改器,选择你的缩进宽度,然后复制输出或下载。ts文件。
生成的接口描述了您提供的示例,而不是您调用的 API,这种区别就是整个风险。即使服务器有时会省略样本的每个对象,也需要标记恰好存在的字段,并且样本中为 null 的字段无法与始终为 null 的字段区分开来。空数组是最清楚的情况:没有元素的数组不会提供有关其包含内容的信息。数组合并在此处通过将列表中的每个对象组合到一个界面中并将某些条目中缺失的键标记为可选,从而提供帮助。更大且更多样化的样本会产生更诚实的类型。其中 API 有架构或 OpenAPI 文档,而是从中生成并使用它来探索未记录的响应。
放入 API 响应、fixture 文件或任何 JSON 值。 如果您想查看嵌套对象、数组和空字段的处理方式,请先加载示例。
设置根类型名称 - 通常是资源,例如用户或发票。嵌套接口从其密钥自动命名,数组元素名称被单数化(版本变为 Release)。
选择接口或类型别名,决定是否导出每个声明,如果您的代码库喜欢不可变的形状,则添加只读修饰符,并将缩进设置为 2 或 4 个空格。
按生成。 查看推断的可选项和联合,然后将代码复制到剪贴板或将其作为 .ts 文件下载,准备好放入您的类型文件夹中。
每个嵌套对象都变成了自己的命名、可重用的接口,而不是内联匿名形状,因此您可以独立导入和引用内部类型。
对象数组合并到一个元素接口中。 某些记录中存在但其他记录中的键变成可选的,这正是分页的 API 数据的行为方式。
选择 NULL 值是否表示键是可选的,或者 NULL 是否属于联合。 这两种约定都是常见的;该工具不会强制在您的代码库中使用一种。
发出 `interface 用户 {}` 或 `type user = {}` 以匹配您现有的 lint 规则,并在每个声明中一致地应用可选的 `export` 和 `readonly` 修饰符。
Flatten nested JSON into single-level dot-notation keys, or unflatten dotted keys back into nested objects and arrays. Lossless round trip. 100% client-side.
Generate a JSON Schema from any JSON sample. Infers types, merges arrays of objects into one item schema, derives required fields, and detects date-time, email, uri, and uuid formats. Draft-07 and 2020-12 output. 100% client-side.
Convert JSON into Go struct definitions with json tags. Nested objects become inline structs, arrays of objects are merged, and field names follow Go conventions. 100% in your browser.
Test JSONPath expressions against any JSON and see the matched values and their paths instantly. Supports wildcards, recursive descent, slices, and filters. 100% client-side.
0 comments
No comments yet. Be the first to share your thoughts!