JSON to TypeScript — Generate TypeScript Interfaces from JSON
Generate TypeScript interfaces from JSON data. Auto-detects types, optional fields, readonly properties — in your browser, no upload.
JSON to TypeScript Interface
Generate TypeScript interfaces from JSON data. Auto-detects types, optional fields, and nested objects. Works entirely in your browser.
TypeScript has taken over the JavaScript ecosystem so completely that every significant NPM package, every framework, and every IDE ships with TypeScript definitions as part of the distribution. The language’s core value proposition is that you write types once and get editor autocompletion, refactoring safety, and compile-time error detection for the rest of the project’s life. Writing TypeScript interfaces by hand for every API response — with nested object types, optional properties, and union type inference — is the primary chore of TypeScript development, and the generated interface serves as the source of truth for every component, every hook, and every test that touches the API.
The non-obvious TypeScript-specific concern is the interface vs type distinction. Interfaces can be merged (two interface User {} declarations in different files become the same type), which is useful for libraries and declaration files that need to be extensible. Type aliases cannot be merged but can express unions, intersections, mapped types, and conditional types — they are the more powerful construct for application code. The generator defaults to interfaces because the TypeScript team’s official style guide prefers them for object shapes, but the toggle exists for teams that prefer type aliases or need union types.
The most common downstream step after generating a TypeScript interface is to pass it to a React component, a Next.js API route, or a utility function that consumes the API response. If the project uses Zod, toggle the Zod option and the generated schema validates the response at runtime and infers the TypeScript type from the schema — no separate interface file needed. If the project uses tRPC, the generated interface is the input to t.procedure.input() for typed RPC endpoints. The interface is the contract. The component, the hook, and the error handler are the application.
How to use
Paste your JSON
Drop a JSON object or array. The generator walks the structure and emits a TypeScript `interface` for the root, with nested interfaces for each object shape.
Choose interface or type
Toggle between `interface` (extensible, merges with same-named declarations) and `type` (exact, works in unions and intersections). Interfaces are the default.
Copy or download the .ts file
Copy the TypeScript to your clipboard or download as a .d.ts file. The output compiles with `tsc --noEmit` — no extra types needed.
Frequently asked
Should I use interface or type?
`interface` is the default TypeScript recommendation for object shapes — it supports declaration merging and extension. `type` is the right choice when you need exact object types, union types, or intersection types. For most API responses, `interface` is sufficient.
How are optional properties determined?
Properties that are absent in some array elements or that are null in the sample are emitted as optional (`key?: Type`). Properties present in every array element are required. Toggle 'all optional' to make every property optional — the safest choice for APIs that evolve.
Does it generate Zod schemas?
Toggle 'Zod' in the output options to emit a Zod validation schema alongside the TypeScript type. The Zod schema validates at runtime and infers the TypeScript type, so the interface and the validator stay in sync. Zod requires the `zod` npm package.
How does it handle union types?
A field that is a string in one array element and a number in another is typed as `string | number`. A field that is an object in one element and null in another is `Type | null`. The generator infers the narrowest union that covers all observed values.
Can it generate const assertions?
Yes — toggle 'const' to emit `as const` after array literals for tuple types or readonly record types. Use const assertions for API fixtures that aren't meant to be mutated at runtime.
Limitations
- No discriminated unionsThe generator does not infer a discriminated union from a `type` property key. A polymorphic JSON response like `{ type: 'image', src: '...' } | { type: 'text', body: '...' }` is typed as a flat union — add the discriminated union by hand after generation.
- No generic type parametersThe output is a concrete interface. A generic API response wrapper like `ApiResponse<T>` requires a type parameter that the generator does not infer. Add the generic by hand and parameterise the inner type.
- No JSDoc annotationsThe generated interfaces have no JSDoc comments. Add `@description`, `@example`, and `@deprecated` annotations by hand to make the types self-documenting.
Platform notes
- macOS
- VS Code with TypeScript support handles the generated interface natively. Use the browser tool for one-off generation from a sample API response during development.
- Windows
- The generated interface compiles in any TypeScript project. Use it for one-off generation from an API response pasted from a browser.
- Linux
- For command-line work, `quicktype --lang typescript` is the standard equivalent. The browser tool is the right pick for one-off generation where Node.js is not installed.
- Web
- Runs entirely client-side. The generation is instant.