When you build frontend applications with TypeScript, converting raw JSON examples into accurate interfaces is a repetitive and error-prone step. This generator automates that process by reading your JSON structure and outputting ready-to-use TypeScript interfaces you can paste directly into your codebase.
The converter is designed for practical developer workflows. It supports nested objects, arrays, mixed structures, and multiple levels of depth so your generated types reflect real API responses. Everything runs locally in your browser, so internal payloads and customer data never leave your machine.
How to generate TypeScript interfaces from JSON
- Paste your JSON into the input area.
- Set a root interface name that matches your domain model.
- Click Generate Interfaces to produce TypeScript output.
- Copy the generated code and paste it into your project.
Example Conversion
{
"id": 1,
"name": "Alice",
"active": true
}interface User {
id: number;
name: string;
active: boolean;
}How Type Inference Works on JSON Data
JSON values carry implicit type information that can be mapped directly to TypeScript types. String values become string, numeric values become number, true and false become boolean, and null becomes null. Arrays are typed by examining their elements: an array of strings becomes string[], while an array of mixed types becomes a union like (string | number)[].
Nested objects generate separate interface definitions. When the tool encounters {"user": {"name": "Alice", "age": 30}}, it creates a root interface with a user property typed as a child interface containing name: string and age: number. This recursive process handles arbitrary nesting depth.
Arrays of objects require special handling. The tool examines all objects in the array to build a merged interface that covers all observed properties. If the first object has fields A and B while the second has fields A and C, the resulting interface includes all three fields, with B and C marked as optional since they do not appear in every element.
Empty arrays are inherently ambiguous. Without any elements to inspect, the tool cannot determine the intended type and falls back to any[] or unknown[]. Providing a sample with at least one element in each array produces more accurate type definitions.
Handling Optional Fields and Union Types
Real-world JSON data is rarely consistent. API responses may include a field in some objects but omit it in others. A value might be a string in one response and null in another. The type generator must make decisions about how to represent this inconsistency in TypeScript.
When a field appears in some array elements but not all, the generator marks it as optional using the ? modifier: middleName?: string. This tells TypeScript that the property may be absent, which accurately reflects the data's behavior.
When a field is present but contains different types across samples, the generator creates a union type. A field that is sometimes a string and sometimes null becomes name: string | null. A field that varies between string and number becomes value: string | number.
The distinction between optional and nullable matters for TypeScript's type checker. An optional field (field?: string) can be undefined or missing entirely. A nullable field (field: string | null) must be present but can be null. Some JSON data exhibits both behaviors, requiring field?: string | null to fully describe the contract.
For the most accurate output, provide the tool with a JSON sample that includes all possible variations of your data structure. A single API response may not reveal optional fields or type variations that appear under different conditions.