이 도구를 사용하는 이유
05Paste any JSON sample and get TypeScript `interface` declarations for the shape. Handles nested objects, mixed-type arrays (as union types), and arrays of similar objects (merged into one interface with optional keys for the rare fields). Runs in your browser.
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).
Everything runs locally. The JSON you paste — including sensitive API responses or production fixture data — never leaves your browser. Pair with our JSON Formatter to clean up the input first, or JSON Schema Generator if you need a JSON Schema instead of TypeScript.
사용 방법
03복사 전 빠른 확인
03Confirm the input is the format you intended.
Scan the result before using it in a document, URL, config, or message.
Copy only the output you need.
사용 사례
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.
자주 묻는 질문
07
Does the tool run entirely in my browser?
Yes. Parsing uses JSON.parse, and type inference is pure JavaScript with no network calls. Sensitive JSON (production API responses, fixture data, internal payloads) never leaves your device.
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.
관련 도구
03JSON 포매터→
JSON을 보기 좋게 정렬하거나 압축하고, 문법 오류를 즉시 검사합니다.
JSON Schema 생성기→
샘플 JSON에서 JSON Schema를 자동으로 추론하여 생성합니다.
JSON Diff Checker→
Compare two JSON values structurally — added, removed, and changed keys per nested path. Order-insensitive by default.