How to Generate TypeScript Types from JSON
Paste a representative JSON response into a converter and it infers an interface from the keys and value types. The generated result is a starting point rather than a finished type, because a single sample cannot show which fields are optional, which may be null, and what an empty array contains. Fix those three things by hand.
JSON to TypeScript
Generate TypeScript interfaces from a sample JSON payload.
Type generation from a sample is inference, and inference from one example is guesswork about everything the example did not contain. The output is still worth having — it gets the shape and the nesting right, which is the tedious part.
What it cannot know is variation. If the sample happened to include a middle name, the generator makes it required; if an array happened to be empty, it has nothing to infer an element type from.
Step by step
-
Pick a response with the fields populated
Choose a sample where optional fields are present rather than absent. A generator can only describe what it sees, so a minimal response produces a minimal and misleadingly narrow type.
-
Generate the interfaces
Nested objects become their own named interfaces, referenced from the parent. Arrays become typed arrays based on the first element. Review the names, which are derived from the keys and are often close but not idiomatic.
-
Mark the optional fields
Add ? to any property the API may omit. This is the single most valuable manual edit, because a missing field typed as required is a runtime error that the compiler promised could not happen.
-
Separate null from optional
A field that is absent and a field that is present with the value null are different situations. Use name?: string for absent and name: string | null for explicitly null. Conflating them causes checks that pass the compiler and fail at runtime.
-
Fix the empty arrays and the numbers
An empty array in the sample generates never[] or any[] and must be typed by hand. Also check whether numeric-looking values are really numbers: an identifier that arrived as "0042" is a string, and typing it as a number loses the leading zeros.
Example
The generated interface, and the same interface after the three manual corrections.
Generated
interface User {
id: number;
name: string;
nickname: string;
tags: never[];
}
Corrected
interface User {
id: number;
name: string;
nickname?: string | null;
tags: string[];
}
Frequently asked questions
Can I generate types from a single API response?
Why did my array come out as never[]?
Should optional fields use ? or | null?
Do generated types validate data at runtime?
What about numbers that are really identifiers?
Tools used in this guide
All tools →- JSON to TypeScript Generate TypeScript interfaces from a sample JSON payload. In your browser
- JSON Formatter Beautify, validate and sort JSON with precise error messages. In your browser
- JSON Schema Validator Check a JSON document against a JSON Schema and see every failure. In your browser
- JSON Tree Viewer Explore a large JSON document as a collapsible tree. In your browser
Related guides
All guides →- How to Format JSON Turn minified or broken JSON into something readable, and fix it when it will not parse.
- How to Debug an API Request Work through a failing request in order, from the status code to the payload.
- JSON vs YAML Which to use for configuration and which for data interchange, and the YAML gotchas worth knowing.
Last reviewed .