JSON to TypeScript Interface
Infer TypeScript interfaces from any JSON object, with nested objects and array element types. Runs in your browser.
Pure browser JavaScript — no external libraries.
How to use this tool
- Paste a JSON object (or array), or upload a .json file.
- Set the root interface name.
- Click Generate interface, then Copy or Download the .ts file.
Infer TypeScript interfaces from any JSON object, with nested objects and array element types. Runs in your browser.
How it works
The JSON to TypeScript Interface tool analyses a JSON value you paste and infers a matching TypeScript interface declaration. It inspects each key's value to determine whether the type is string, number, boolean, null, an object (triggering a nested interface), or an array (sampling the first element to determine the element type).
This saves the tedious and error-prone work of hand-writing interfaces for API responses. Paste the raw JSON returned by an endpoint and immediately get a typed interface you can drop into your TypeScript project.
The tool runs entirely in your browser, so you can safely paste responses that include auth tokens or private user data without sending anything to a server. Generated interfaces use PascalCase names derived from context where possible.
For union types or optional fields, review the output: if a key is sometimes missing or can hold multiple types, you may need to add '?' or a union manually. The tool makes a best-guess from the single sample you provide.
Worked example
Generate an interface from a GitHub user API response
- Call the GitHub API for a user and copy the JSON response body.
- Paste the JSON into the tool's input box.
- Click Convert.
- Copy the generated TypeScript interface.
- Paste it into your project's types.ts file and adjust optional fields as needed.
A TypeScript interface such as: interface Root { login: string; id: number; avatar_url: string; ... }
Common mistakes to avoid
- Pasting a JSON array at the root level without wrapping it in an object -- wrap arrays in a parent object so the tool has a named entry point.
- Assuming all fields are required; JSON from APIs often omits optional fields so you may need to add '?' to properties that can be absent.
- Forgetting to rename the generated 'Root' interface to match your domain model before adding it to your codebase.
Key terms
- Interface
- A TypeScript construct that describes the shape of an object -- its property names and their types -- without providing an implementation.
- Type inference
- The process of automatically determining a type from a value rather than requiring the developer to write it explicitly.
- Nested interface
- When a JSON value is itself an object, the tool creates a separate named interface for it and references it by name in the parent interface.
Frequently asked questions
- How are nested objects handled?
- Each nested object becomes its own named interface (derived from its key), referenced from the parent.
- What about mixed array types?
- Array element types are unioned, e.g. (string | number)[]. Empty arrays become any[].