How to Convert JSON to TypeScript
Generate TypeScript interfaces or type aliases from JSON data, with nested objects extracted into named types for type-safe API responses and data handling.
- 1
Paste your JSON
Copy a JSON object or array — typically from an API response — and paste it into the input editor.
- 2
Choose interface or type
Select whether to generate TypeScript interfaces or type aliases. Interfaces are extendable and preferred for object shapes; type aliases work better for unions and computed types.
- 3
Review the output
Inspect the generated TypeScript definitions, checking that field types are correct and nested objects have meaningful names.
- 4
Copy the TypeScript code
Click copy to grab the type definitions. Paste them into a `.ts` file and use them to type your API calls and data structures.
Manually writing TypeScript interfaces for API responses is slow and error-prone, especially for deeply nested data structures. The JSON to TypeScript Converter analyzes real JSON data and generates accurate type definitions, giving you type safety without the manual effort.
Understanding JSON-to-TypeScript conversion
TypeScript’s type system maps naturally to JSON structures. JSON objects become interfaces with typed properties, arrays become typed arrays, and primitive values map to string, number, boolean, or null. The converter examines each value in your JSON sample and infers the most specific type possible.
Nested objects are extracted into named interfaces rather than inlined, making the types reusable and easier to maintain. Arrays of objects get their own interface based on the union of all properties found across array elements — this handles cases where different objects in the same array have slightly different fields.
The choice between interface and type matters for extensibility. Interfaces support extends for inheritance and declaration merging, making them the standard choice for object shapes in most codebases. Type aliases are more flexible for union types, intersections, and mapped types, but cannot be extended in the same way.
Tips and best practices
- Use multiple JSON samples for better types. If your API returns different fields depending on the request, combine multiple response samples to generate a more complete interface with optional properties.
- Mark optional fields with
?. After generating the types, add?to properties that may not always be present. The converter treats all fields as required since they appear in the sample. - Use
unknowninstead ofanyfor dynamic fields. If the converter generatesanyfor fields with unpredictable types, change them tounknownto force explicit type checking. - Name your root interface descriptively. Replace generic names like
RootObjectwith domain-specific names likeUserProfileorOrderResponseto improve code readability. - Export the interfaces. Add the
exportkeyword so the generated types can be imported across your codebase.
Common issues
- Null fields generate
nullinstead of optional. If a field isnullin your JSON sample, the converter may type it asnullrather than making it optional. Adjust tofield?: string | nullbased on your API’s behavior. - Array element types may be too narrow. If your sample array contains only one type of element, the converter cannot know about other possible shapes. Check API documentation for the full range of possible values.
- Numeric strings typed as strings. Fields like
"id": "12345"are correctly typed asstringeven though the value looks numeric. If the API actually returns a number sometimes, you need to adjust the type manually.
Open JSON to TypeScript Converter
Use the JSON to TypeScript Converter tool directly — no sign-up needed. Runs entirely in your browser.
Open JSON to TypeScript Converter
Comments