Writing types by hand from a JSON sample is slow and easy to get subtly wrong, especially once nesting, arrays of objects and fields that only sometimes appear enter the picture. This tool walks the actual structure of your sample, merges the shape of every item in an array so a field missing from some entries becomes an optional property, and names nested object types sensibly based on the key they came from.
Everything runs locally in your browser using plain JavaScript. Your JSON sample, which is very often a real API response containing production data, is never uploaded anywhere, so pasting a payload that includes customer records or internal identifiers does not mean sending that data to a third party server.
When you should generate types from a JSON sample
Generating types is worth doing the moment you start writing TypeScript code against an API response, a webhook payload or a configuration file and do not already have a type definition for it. Typing that data by hand from a spec document is slow and frequently drifts from what the API actually returns, whereas inferring types directly from a real sample matches production reality.
It is also a fast way to get IDE autocomplete and compile time safety on a JSON file you are reading in a Node.js script, a build tool or a static site generator, where a small typo in a property name would otherwise only surface at runtime.
- Generate types when writing TypeScript code against a real API response.
- Generate types for a JSON configuration file you read at build time.
- Generate types to catch typos in property names at compile time instead of runtime.
- Regenerate types whenever the underlying API or data shape changes.
How this JSON to TypeScript converter infers interface definitions
Every JSON object becomes a named type, with each key mapped to a property and each value's type inferred recursively. A nested object gets its own separate named type rather than being inlined, so a user object containing an address object produces both a User interface and a separate Address interface that User references by name, matching how most hand written TypeScript is actually structured.
Type names are derived from the property key that held the value, converted to PascalCase, so a key named shippingAddress produces a type named ShippingAddress. When two different keys would otherwise produce the same type name, a numeric suffix is appended automatically so no generated declaration silently overwrites another.
Turning a json to ts types workflow into optional fields
Arrays of objects are the trickiest part of json to ts types generation, because different entries in a real array frequently do not all share the exact same set of keys. This converter merges every object in an array together: any key present in every entry becomes a required property, and any key missing from at least one entry becomes optional, marked with a question mark exactly the way hand written TypeScript expresses an optional field.
When a single key holds different primitive types across different entries, for example a value that is sometimes a number and sometimes null, the generated property type becomes a union of every type actually observed, such as number | null, rather than falling back to the unhelpful any.
Choosing between interface and type
Both declaration styles describe the same shape and TypeScript treats them almost identically for this kind of generated output. Interface is the more conventional choice for object shapes in most style guides and supports declaration merging, which some codebases rely on. Type is more flexible for expressing unions and is the only option once you need something that is not a plain object shape, such as a bare union or array alias.
This converter lets you pick either style, and applies it consistently across every generated declaration, including the nested object types produced from arrays, so the whole output file reads as one consistent style rather than a mix of the two.
How to generate typescript interface names for the root value
The root type name you provide becomes the outermost declaration in the output. If your JSON sample is an array at the top level, the converter automatically creates a singular item type, for example ProductEntry, and a separate array alias, Product, referencing it, so the exported root type always reads clearly as either a single value or a list of them.
Because everything runs client side, generating types for a large sample containing hundreds of array entries still completes in a fraction of a second, since the browser only has to merge object shapes rather than perform any network request. Most developers who search for a way to build a typescript type from json are really looking for exactly this: a fast, one time generation step rather than a library to install and maintain.
Reviewing the output before you commit it
Generated types are a starting point, not a final answer. Skim the output of this json to typescript converter for property names that would read better renamed, and for any union that ended up wider than expected because one entry in your sample had an unusual value, such as an empty string where every other entry had a number.
Once the shape looks right, paste the declarations into a dedicated types file in your project and import them wherever the corresponding JSON is consumed, so the type stays available to every part of your codebase that touches that data.
How to convert JSON to TypeScript
- 1
Add your JSON sample
Paste a real JSON object or array into the box, or drop a .json file. Nothing leaves your device.
- 2
Name the root type
Give the top level type a descriptive name, such as ApiResponse or Product.
- 3
Choose interface or type
Pick whichever declaration style matches your codebase's existing conventions.
- 4
Generate and copy
Press generate, review the resulting definitions, then copy them or download a .ts file.
Related tools worth bookmarking
Sources and further reading
- TypeScript Handbook: Object TypesThe official documentation on interfaces, optional properties and type aliases this tool generates.typescriptlang.org
- JSON.org: Introducing JSONThe official description of the JSON format this tool reads as input.json.org
- MDN: JSON.parseThe browser API used to parse the JSON sample before its structure is walked.developer.mozilla.org
Frequently asked questions
Common questions about the json to typescript converter.
Yes, with no signup and no limit on how many samples you convert. Type inference runs entirely in your browser, so there is no server side cost per conversion that would require charging for the tool or limiting how often you use it.
Nested object types are named after the property key that contained them, converted to PascalCase, so a key named billingAddress produces a BillingAddress interface. If two different keys would produce the same generated name, a numeric suffix is added automatically to avoid a collision between the two declarations.
The converter merges every object in the array together, so a key present in all of them becomes a required property and a key missing from at least one entry becomes optional with a question mark. This mirrors how a real API response often varies slightly between individual records.
Yes, a segmented control lets you choose interface or type declarations, and the setting applies consistently across every generated type in the output, including the nested types produced from objects found inside arrays.
Yes, with no practical depth limit. Every nested object produces its own named type that references correctly from its parent, so a sample with several levels of nesting still produces readable, separately named interfaces instead of one giant inline type.
No. Parsing and type generation both happen locally in your browser using JavaScript, so a real API response containing production data, customer records or internal identifiers never leaves your device during the conversion.