JSON to TypeScript — Generate Interface from JSON
Automatically generate TypeScript interfaces from JSON objects. Supports nested objects and arrays.
About JSON to TypeScript — Generate Interface from JSON
Convert JSON to TypeScript interface or type definitions instantly. Supports nested objects, arrays, null → optional, and readonly modifiers. Free, browser-based, no sign-up required.
How to Use
- 1Paste your JSON into the input field on the left.
- 2Set the interface name and toggle options (readonly, null→optional).
- 3Copy the generated TypeScript from the output panel.
Features
- Generates nested interfaces automatically from complex JSON
- null values become optional fields with one click
- Supports both interface and type alias output
- Browser-based — your data never leaves your device
Why Generate TypeScript Types from JSON?
Manually writing TypeScript interfaces for API responses is tedious and error-prone. This tool automates the process — paste your JSON, get production-ready type definitions instantly.
Type Safety for API Responses
When you call a REST API, the response is untyped by default. Assigning a TypeScript interface to the response lets your editor autocomplete property names and catch typos before they hit production.
interface vs type alias
Both interface and type can describe object shapes. interface is preferred for public APIs and when you need to extend or merge declarations. type alias is more flexible for unions, intersections, and utility types.
When to Add readonly
Use readonly when your data flows one way — for example, Redux state, React props from a parent, or API responses that should never be mutated directly. The compiler enforces the constraint so you catch bugs at compile time.
How to Use the Generator
The tool works entirely in your browser — no uploads, no accounts, and no data is sent anywhere.
Step 1 — Paste Your JSON
Copy a JSON response from your browser's DevTools Network tab, a Postman response, or any JSON file. Paste it into the left input panel. The TypeScript output updates in real time.
Step 2 — Name Your Interface
Enter a descriptive interface name in the toolbar. The generator capitalizes it automatically and uses it for nested interfaces too (e.g. "User" becomes "User" and "UserAddress" for a nested address object).
Step 3 — Copy and Use
Click Copy to grab the generated TypeScript. Paste it directly into your .ts or .d.ts file. For large projects, consider placing shared interfaces in a types.ts or api.d.ts file so they can be imported across your codebase.
Practical Examples
Here are the most common use cases where this generator saves the most time.
REST API Response Types
Open DevTools → Network → click any API call → copy the response JSON. Paste it here to get a typed interface in seconds. This is especially useful when working with third-party APIs that don't ship TypeScript types.
Configuration File Typing
If your app reads a JSON config file at runtime, paste the config here to get a matching interface. You can then use it with JSON.parse to get type-safe access to every config key.
Mock Data and Fixtures
Paste your test fixtures or mock data to auto-generate the types. Since the types are derived from real data, they stay in sync with your mocks rather than drifting apart as they often do when hand-written.
FAQ
- What is the difference between interface and type in TypeScript?
- Both can describe object shapes, but interface is preferred for object types because it supports declaration merging and extension with extends. Use type when you need union types, intersection types, or mapped types.
- How are nested objects handled?
- Nested objects are automatically extracted into separate interfaces. For example, {"user": {"name": "Alice"}} generates a User interface and a UserInterface that references it, keeping your type definitions clean and reusable.
- What happens to null values?
- With "null→optional" enabled, null fields become optional properties typed as field?: null. With it disabled, they are typed as field: null. For real APIs where fields may be absent, optional is usually the better choice.
- How are arrays converted?
- The type of the first array element is used to infer the array type, producing Type[] syntax. Empty arrays become unknown[]. Arrays of objects generate a dedicated interface for the element type.
- What does the readonly option do?
- Enabling readonly adds the readonly modifier to every property, producing readonly field: type. This is useful for immutable data structures, Redux state, or any object you want to protect from accidental mutation.
Found a bug or something not working as expected?
Report a bug →