JSON to TypeScript Types
Generate TypeScript interfaces from a JSON sample — nested types, arrays, optional keys inferred.
工具代码会在浏览器中处理所选文件和输入内容，不会将其提交给 TOOLGRID 的处理接口。 TOOLGRID 只衡量工具使用情况，不记录你输入的内容。
- 不上传工具输入至 TOOLGRID
- 不登录
- 复制前先检查
Loading tool…
这个工具能做什么
In-browser JSON to TypeScript type generator. Walks any JSON sample and emits export interfaces with merged array shapes and union types.
Paste a JSON sample (an API response, a config file, anything). The tool walks the structure, infers a TypeScript type for every field, and emits one export interface per nested object — plus a root type that names the top-level shape.
Nested objects each get their own interface, named in PascalCase from the key that holds them. Mixed-value fields produce union types (string | number). Arrays of objects with heterogeneous shapes get merged into a single interface with the rare fields marked optional — instead of emitting N separate interfaces or one big union.
Useful for: typing an external API response, scaffolding types from a JSON fixture, onboarding TypeScript on a JavaScript codebase that has known JSON samples, or seeding a type-driven validator (with Zod, Valibot, or io-ts written from the inferred shape).
Type inference runs in your browser. Tool code does not submit entered JSON to a TOOLGRID processing endpoint; browser-local processing is not a blanket security guarantee for API responses or fixture data. Pair with our JSON Formatter to clean up the input first, or JSON Schema Generator if you need a JSON Schema instead of TypeScript.
这个工具适合解决什么问题
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.
依赖结果前需要检查什么
- Performance and maximum practical input size depend on browser memory, device speed, and the structure of the input.
- Review the generated result before replacing or publishing an original file.
如果还需要校验、转换或复用结果，可以继续打开相近的浏览器本地工具。
如何使用
01使用场景
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.
常见问题
02Does the tool run entirely in my browser?
Parsing uses JSON.parse and type inference is pure JavaScript in your browser. Tool code does not submit entered JSON to a TOOLGRID processing endpoint. Review browser extensions and device security before handling sensitive payloads.
How are mixed-type arrays handled?
Arrays with heterogeneous primitive types produce union types — e.g., <code>[1, "two"]</code> becomes <code>(number | string)[]</code>. Arrays of objects with different shapes are merged: the tool collects the union of all keys, marks rare keys as optional, and emits ONE interface for the array element rather than a union of N similar interfaces.
What about TypeScript-specific features like literal types?
The tool emits broad primitive types (string, number, boolean) rather than literal types ("alice", 42, true). For an API response where a status field is one of "ok" / "error" / "pending", you'll get <code>string</code> — narrow it manually after generation if you want exhaustive typing.
How does it handle JSON with very deep nesting?
Nesting depth is unlimited within reason — each level produces its own interface. Type names are kept unique by appending a numeric suffix when collisions occur (e.g., <code>Profile</code>, <code>Profile2</code> if two unrelated objects map to the same base name).
Can I use the output with strict TypeScript?
Yes — the output uses <code>export interface</code> and is compatible with strict mode out of the box. The only TypeScript-specific liberty is <code>unknown[]</code> for empty arrays (instead of <code>any[]</code>), which is the strict-friendly choice.
What if my JSON has invalid syntax?
The tool reports the parse error inline so you can fix the input. Common causes: trailing commas, unquoted keys, single-quoted strings, comments — all of which are valid JavaScript but not valid JSON. Use our JSON Formatter to validate and pretty-print before generating types.
Does it generate Zod or runtime validators?
No — only TypeScript types. For runtime validation, port the inferred shape to Zod (z.object({...})), Valibot, io-ts, or similar by hand. There are also dedicated JSON-to-Zod tools if you specifically want runtime schemas.