JSON to TypeScript — Convert JSON to an Interface
Convert JSON to a TypeScript interface in your browser. Nested objects become named interfaces, arrays of objects merge optional fields, and nothing is uploaded. If the JSON is invalid, validate it first.
TypeScript output
How to Convert JSON to TypeScript
- Start from a valid sample on JSON examples or paste an API response.
- Set the root interface name, such as User or ApiResponse.
- Copy the generated interfaces into your project, or download a .ts file.
About This JSON to TypeScript Converter
This tool infers TypeScript interfaces from a JSON value. It is not a full editor. Clean the payload in the JSON editor or formatter first if the types look wrong because of invalid input.
Unlike multi-language CLI tools such as quicktype, this page focuses on paste-to-interface conversion in the browser: named nested interfaces, optional fields from arrays, and a .ts download — with no upload and no signup.
Inference works by reading the sample you provide, so the quality of the output is entirely a function of the quality of the input. Each JSON type maps to the obvious TypeScript one: a string becomes string, a number becomes number regardless of whether it looked like an integer, true and false become boolean, an object becomes its own named interface, and an array becomes an array of whatever its elements infer to. A null in the sample is the awkward case, because null tells you what the value is not rather than what it is — the converter has to emit null or a union with it, and only you know whether the real type is a nullable string or a nullable object.
Arrays of objects get special handling, and it is the most useful thing this tool does. When an array contains several objects, the converter merges their keys into a single interface rather than emitting a union of near-identical shapes. Any key that is present in some elements and missing from others is marked optional with a question mark. That is exactly the behaviour you want for a paginated API response, where a field such as deletedAt only appears on some records — but it also means a one-element sample can never discover optionality. Paste several representative records, not just the first one.
Nested objects become their own exported interfaces, named from the key that contained them, rather than being inlined as anonymous types. That keeps the root interface short and lets you import a nested shape on its own when a function only takes that part. The generated names follow the JSON keys, so a key called data or items produces an interface called Data or Items — generic enough that renaming is usually worth a moment before you commit.
Treat the result as a very good first draft rather than a contract. A sample cannot tell you that a field is a currency code rather than a plain string, that a number is always an integer, that a string is one of five known values that deserve a union type, or that a field the server documents as required happened to be absent from the response you captured. Where the API publishes an OpenAPI or JSON Schema document, generate from that instead — it encodes the guarantees a sample can only hint at. This page is for the very common case where no such document exists and you have a payload in front of you.
If the paste will not convert, the JSON is invalid rather than unusual — check it in the JSON validator, tidy it in the JSON formatter, and convert again.
Frequently Asked Questions (FAQ)
How do I convert JSON to a TypeScript interface?
Paste JSON, name the root type, and copy the generated export interface blocks — or download a .ts file.
Should I use interface or type for API shapes?
This converter emits export interface blocks, which fit most API response shapes. Prefer type aliases when you need unions, mapped types, or utility types after you paste the output into your project.
Are missing fields marked optional?
Yes. Keys missing from some objects in an array become optional properties (?:). Values that are null in the sample may appear as unions with null — review those before you commit the types.
Can I name the root interface?
Yes. Change the root interface name before you copy the output.
What if my JSON is invalid?
Fix it in the JSON validator and convert again. Invalid JSON cannot be inferred into TypeScript.
Does this upload my JSON?
No. Inference runs in your browser only. Use a representative sample for drafts; production contracts still belong in OpenAPI or hand-reviewed types.
How are nested objects named?
Each nested object becomes its own exported interface, named from the key that contained it, instead of being inlined anonymously. That keeps the root interface short and lets you import a nested shape on its own. Because the names come from your JSON keys, a key called data or items produces a very generic interface name — rename those before committing.
What happens to null values in my sample?
A null tells the converter what the value is not, never what it is. It emits null or a union containing it, and only you know whether the real type is a nullable string, a nullable object, or a field that is simply always absent. Review every null in the output and replace it with the intended type.
How are numbers typed — integer or float?
Every JSON number becomes number. TypeScript has no separate integer type, so 1 and 1.5 infer identically. If a field must be a whole number, enforce that with a runtime check or a branded type after you paste the output in.
Why did my one-element array not produce optional fields?
Optionality is discovered by comparing objects. With a single element there is nothing to compare, so every key looks required. Paste several representative records — ideally including one that omits the fields you expect to be optional — and the converter will mark them with a question mark.
Should I use this instead of generating types from OpenAPI?
No, when an OpenAPI or JSON Schema document exists, generate from that. A schema encodes which fields are required, which strings are enums, and which numbers have bounds — guarantees a sample can only hint at. This page is for the common case where no schema is published and you have a live payload in hand.
Can I convert TypeScript back into JSON?
Not here — this direction is one-way. To produce a sample payload from a type you have written, hand-write an example in the JSON editor and validate it, or use a faker library in your own project.
Tips for Better Generated Types
- Use a representative sample so optional fields are detected.
- Rename generated nested interfaces if the key names are too generic.
- Review unions from mixed arrays before you commit the types.
- Validate messy input in the JSON validator before converting.
- Paste several records from a list endpoint, not just the first. Optional fields can only be detected by comparing objects against each other.
- Include a record that exercises the edge cases — a deleted row, an unset field, an empty nested array — so the generated types cover them.
- Replace every inferred null with the type you actually mean. A null in the sample is missing information, not a finished answer.
- Turn repeated string values such as status or role into a union type by hand. Inference can only see string.
- Name the root interface after the endpoint rather than the tool default, so the generated file reads well when someone opens it next month.