About JSON to TypeScript
Generating TypeScript types from a JSON sample gets you a usable interface in seconds, but it is inference from one example - and it is worth being clear about what that can and cannot know.
A single sample cannot tell you which fields are optional, which can be null, whether a string field is actually a union of specific literals, or whether an empty array holds numbers or objects. The generated types describe exactly the document you provided, so anything the sample happens not to contain becomes wrong in a way the compiler will confidently endorse. Generating from several samples, or from an OpenAPI or JSON Schema definition where one exists, avoids most of this.
The deeper issue is that TypeScript types are erased at runtime, so an interface generated this way is a compile-time assertion about data that arrives from outside your program. If the API changes, the types still compile and the failure surfaces as undefined somewhere far away. For anything crossing a network boundary, a runtime validator - Zod, io-ts, Valibot, or a JSON Schema check - is what actually protects you; generated interfaces are documentation with autocomplete.
This runs in your browser, so a real payload is never uploaded - which matters when the document you are converting is a production API response rather than a toy example.
How to use the JSON to TypeScript
- Paste the JSON. If it does not parse, fix that first - the error will name the position.
- Convert, and read the TypeScript output.
- Check the specific cases listed below before relying on the result - TypeScript and JSON do not model data identically.
- Copy the output, or convert back to confirm the round trip does what you expect.
Examples
-
API sample
{"id":"550e8400-e29b-41d4-a716-446655440000","count":42}
When you need this
- Turning an API response into TypeScript for a config file, a spreadsheet, or a type definition.
- Producing a TypeScript fixture from real data rather than writing it by hand.
- Checking how a nested structure maps into TypeScript before committing to it.
- Converting a sample from documentation into the form your tooling needs.
Common problems and what causes them
- Optional fields inferred as required
- A field absent from your sample simply will not appear, and one present will be required. Generate from multiple samples, or mark fields optional by hand against the real API contract.
- null and undefined conflated
- A null in the sample usually becomes null, but APIs often use null and omission interchangeably. `string | null` and `string | undefined` behave differently under strictNullChecks, and the generator cannot tell which the API means.
- Empty arrays typed as never[] or any[]
- With no elements to inspect, the generator has nothing to work from. Supply a sample containing at least one element of each array, or fill the type in yourself.
- String fields that should be literal unions
- A status of "active" becomes string, not "active" | "pending" | "closed". The narrower type is what catches typos at compile time, and only you know the full set.
- Large integers typed as number
- JavaScript numbers are doubles, so an id above 2^53 loses precision before your code even sees it. If the API returns large integer ids, they should be strings in both the JSON and the type.
- Trusting compile-time types at a runtime boundary
- Types vanish at runtime. An interface is an assumption about the response, not a check on it. Validate incoming data with Zod or a JSON Schema validator and derive the type from the validator, so the two cannot drift apart.
FAQ
- Can TypeScript types be generated reliably from one JSON sample?
- Only for the shape of that sample. Optionality, nullability, literal unions and empty-array element types cannot be inferred from a single example, so treat the output as a strong first draft rather than a contract.
- interface or type - which should the generator emit?
- For plain object shapes they are almost interchangeable. interface supports declaration merging and often produces clearer error messages; type is required for unions and mapped types. Either is fine if you are consistent.
- Do generated types validate my data at runtime?
- No. TypeScript types are erased when compiled, so nothing checks that the response matches. Use a runtime validator such as Zod and infer the static type from the schema, which keeps validation and types in sync.
- How should optional and nullable fields be represented?
- `field?: string` for a field that may be absent, `field: string | null` for one always present but sometimes null, and `field?: string | null` when both happen. APIs are frequently inconsistent here, so it is worth checking the real contract rather than a sample.
- Is my data uploaded when I convert it here?
- No. The conversion runs entirely in your browser with no network request, so pasting a real payload does not transmit it. The page works offline once loaded.
- Are optional fields detected?
- Types reflect the sample you provide; union optional fields by merging multiple samples manually.
Related reading
- JSON formatter fix the input first
- JSON validator