为什么用这个工具
03JSON 到 typescript在浏览器本地运行，适合快速处理与复制结果。
JSON 到 typescript适用于日常高频小任务，打开即用。
默认本地处理，便于快速检查与复制结果。
如何使用
02复制前快速检查
03先确认输入格式符合你的预期。
在把结果用于文档、链接、配置或消息前快速扫一眼。
只复制你真正需要的输出。
使用场景
Curl the API once, paste the JSON response in, and use the output as a starting point for your fetch/SWR/React Query type parameter. Adjust unions and optional flags as you discover edge cases.
When introducing TypeScript on an existing codebase, paste a sample of your JSON config (tsconfig-like, custom feature flags, etc.) to get a typed shape you can refine.
The interfaces give you the structure; from there you can hand-translate each field to a Zod validator (z.string(), z.number(), z.object({...})). Faster than starting from scratch.
When writing tests, you often have a fixture JSON. Generate the interface so your test helpers can be typed against the fixture shape without manually writing out 40 fields.
Capture one webhook payload, paste it in, and embed the TypeScript interface in your README or runbook. Future readers (and your future self) understand the shape at a glance.
使用技巧
- 01Shape merging for arrays of objects
If your array has objects like <code>[{a:1, b:2}, {a:1, c:3}]</code>, the tool emits ONE interface with all three fields, marking <code>b</code> and <code>c</code> as optional. This matches what you usually want when typing API responses where some fields are present only sometimes.
- 02Null becomes its own type
A literal <code>null</code> in the JSON produces a <code>null</code> type. If a field can be either string or null, the inferred type is <code>string | null</code>. To get an optional field instead, ensure the key is missing in the sample (rather than present with a null value).
- 03Empty arrays become unknown[]
When a JSON array is empty (<code>[]</code>), the tool can't infer the element type and emits <code>unknown[]</code>. Add a representative sample element to the array before running the conversion to get a real element type.
- 04Rename interfaces after generation
Inferred names come from PascalCase'd field names (<code>addresses</code> → <code>Address</code> for array elements). For polished code, you may want to rename top-level interfaces to match your domain language — find-and-replace in your editor takes seconds.
常见问题
01
这个工具会上传数据吗？
默认在浏览器本地处理。
相关工具
03JSON 格式化→
格式化、压缩并校验 JSON。
JSON Schema 生成器→
根据 JSON 样例推断 Schema，可选 draft 版本和必填字段策略。
JSON 差异→
JSON 差异，在浏览器中快速完成单项任务。