Skip to content
browserutils
How-to

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.

4 steps
  1. 1

    Paste your JSON

    Copy a JSON object or array — typically from an API response — and paste it into the input editor.

  2. 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. 3

    Review the output

    Inspect the generated TypeScript definitions, checking that field types are correct and nested objects have meaningful names.

  4. 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 unknown instead of any for dynamic fields. If the converter generates any for fields with unpredictable types, change them to unknown to force explicit type checking.
  • Name your root interface descriptively. Replace generic names like RootObject with domain-specific names like UserProfile or OrderResponse to improve code readability.
  • Export the interfaces. Add the export keyword so the generated types can be imported across your codebase.

Common issues

  • Null fields generate null instead of optional. If a field is null in your JSON sample, the converter may type it as null rather than making it optional. Adjust to field?: string | null based 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 as string even though the value looks numeric. If the API actually returns a number sometimes, you need to adjust the type manually.
Try it now

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