# 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.

- URL: https://www.browserutils.dev/how-to/convert-json-to-typescript
- Published: 2026-09-02
- Updated: 2026-07-02

---

## Step 1: Paste your JSON

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

## Step 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.

## Step 3: Review the output

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

## Step 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](/tools/json-to-typescript) 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.