Command Palette

Search for a command to run...

JS

json 打字稿

从任何 JSON 示例生成 TypeScript 接口。 推断嵌套类型,将对象数组合并到单个接口中,标记为可空键和缺失键,并发出干净的可导出代码。 100% 客户端。

什么是 JSON 到 TypeScript 转换器?

JSON 到 TypeScript 转换器读取一个示例 JSON 值 - 一个 API 响应、一个配置文件、一个数据库记录 - 并写入描述它的 TypeScript 接口。嵌套对象成为它们自己的命名接口,对象数组合并到单个元素接口而不是扩大的联合中,并且从某些记录中为空或缺少的键被标记为可选的。你粘贴你已经拥有的数据;你得到的类型是你本来会手写的。

API响应用手打字是乏味的,而且容易出错,具体方式是:你输入你 * 认为 * 端点返回的东西,而不是它返回的东西。你从未注意到的字段被省略,有时为null的整数被打为`number`,错误在生产中的运行时而不是在编辑器中浮出水面。直接从真实有效负载生成类型可以缩小该间隙,因为你编译的形状是服务器发送的形状。

Everything都在你的浏览器中运行推理引擎是无依赖的TypeScript,而不是一个远程服务的包装器,所以有效负载- 通常会携带访问令牌,客户记录和内部ID- 永远不会离开页面选择界面或类型别名,切换`导出`关键字和`只读`修改器,选择你的缩进宽度,然后复制输出或下载。ts文件。

JSON到TypeScript转换给你的一个快速方法是内置的样本,按Load Sample,然后生成,你得到三个JSON到TypeScript接口:`Root`,`Owner`和`Release`,第二个版本没有`notes`键,所以合并后的`Release`接口读取`notes?:string`,而`retiredAt`在唯一的记录中为null,所以就变成`retiredAt?: null`,那就是诚实的结果,因为一个null没有给出真实类型的证据,要将JSON转换为TypeScript的真实端点,粘贴几个记录,所以推断有更多可比较的。

生成的接口描述了您提供的示例,而不是您调用的 API,这种区别就是整个风险。即使服务器有时会省略样本的每个对象,也需要标记恰好存在的字段,并且样本中为 null 的字段无法与始终为 null 的字段区分开来。空数组是最清楚的情况:没有元素的数组不会提供有关其包含内容的信息。数组合并在此处通过将列表中的每个对象组合到一个界面中并将某些条目中缺失的键标记为可选,从而提供帮助。更大且更多样化的样本会产生更诚实的类型。其中 API 有架构或 OpenAPI 文档,而是从中生成并使用它来探索未记录的响应。

如何使用 JSON 到 TypeScript 转换器?

  1. 粘贴您的 JSON

    放入 API 响应、fixture 文件或任何 JSON 值。 如果您想查看嵌套对象、数组和空字段的处理方式,请先加载示例。

  2. 命名根类型

    设置根类型名称 - 通常是资源,例如用户或发票。嵌套接口从其密钥自动命名,数组元素名称被单数化(版本变为 Release)。

  3. 选择您的输出风格

    选择接口或类型别名,决定是否导出每个声明,如果您的代码库喜欢不可变的形状,则添加只读修饰符,并将缩进设置为 2 或 4 个空格。

  4. 生成,然后复制或下载

    按生成。 查看推断的可选项和联合,然后将代码复制到剪贴板或将其作为 .ts 文件下载,准备好放入您的类型文件夹中。

主要特点

  • 嵌套接口提取

    每个嵌套对象都变成了自己的命名、可重用的接口,而不是内联匿名形状,因此您可以独立导入和引用内部类型。

  • 智能阵列合并

    对象数组合并到一个元素接口中。 某些记录中存在但其他记录中的键变成可选的,这正是分页的 API 数据的行为方式。

  • 您控制的可为空处理

    选择 NULL 值是否表示键是可选的,或者 NULL 是否属于联合。 这两种约定都是常见的;该工具不会强制在您的代码库中使用一种。

  • 接口或类型别名

    发出 `interface 用户 {}` 或 `type user = {}` 以匹配您现有的 lint 规则,并在每个声明中一致地应用可选的 `export` 和 `readonly` 修饰符。

Frequently Asked Questions

JSON粘贴到编辑器中,设置根类型名称,然后按生成工具推断每个密钥的类型,将嵌套对象提取到自己的界面中,输出代码,您可以直接复制到。ts文件中。没有注册,也没有上传 - 推理在您的浏览器中运行。

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

json to typescriptjson to typescript interfaceconvert json to typescriptjson to interface generatortypescript type generatorjson to typegenerate typescript from jsonapi response typestypescript interface from apijson schema to typescript