export interface Root { user: User; posts: Post[]; meta: Meta; } export interface Meta { total: number; page: number; perPage: number; } export interface Post { id: number; title: string; published: boolean; views: number; author: null; } export interface User { id: number; name: string; email: string; role: string; active: boolean; score: number; tags: string[]; address: Address; } export interface Address { street: string; city: string; zip: string; country: string; }
You Might Also Like
JSON to TypeScript Interface Generator — Convert JSON to TS Types Online Free
About this tool
Generate TypeScript Interfaces from JSON Instantly — No Install, No Sign-Up
You just got an API response back and now you need to write TypeScript interfaces for it. If it has five nested objects and three arrays, that is twenty minutes of tedious typing — and you have to get every field name exactly right or your code won't compile. Paste the JSON here and get the interfaces in two seconds.
The generator walks your entire JSON tree recursively. Every nested object becomes its own named interface. Arrays of objects get a unified interface covering all keys that appear across every element. Property types are inferred directly from the values: string, number, boolean, null, and arrays — with union types for mixed arrays.
Two output modes give you control over TypeScript style. interface is the traditional choice for describing object shapes and is open for extension through declaration merging. type (type alias) is stricter by default and works better for mapped and conditional types. For plain API response shapes both are functionally identical — pick the style your codebase uses.
The null as setting matters for correctness. When a JSON value is null, TypeScript needs a type. Setting it to null (the default) is the most accurate representation and works with strictNullChecks. Setting it to unknown is the safest choice for untrusted API data — TypeScript will force you to check the value before using it. Setting it to any skips type checking entirely, which is the least safe but most permissive option.
All conversion runs entirely in your browser — no server, no sign-up, works offline. Paste your JSON, adjust the options to match your codebase conventions, and download the .ts file.
Features
- Instant live conversion — TypeScript interfaces update as you type JSON
- interface vs type alias output — choose your codebase's preferred style; both produce identical runtime behavior for object shapes
- Recursive nested object support — each object at any depth generates its own PascalCase-named interface with the parent referencing it by name
- Smart array handling — arrays of objects merge all elements into one unified interface, catching optional fields that appear in some elements but not others; use the JSON Formatter to pretty-print API responses before pasting here
- Optional fields toggle — adds
?to every property for partial types, partial update payloads, or APIs that may omit fields - Null safety control — choose between
null,unknown, andanyfor null JSON values to match yourtsconfigand safety requirements - Export keyword toggle — turn off for module-internal types, turn on (default) for shareable types that can be imported across your project
- Array syntax:
T[](concise, idiomatic) orArray<T>(explicit, readable in complex generics) - Customizable root interface name — rename from the default
RoottoApiResponse,UserProfile, or whatever matches your domain model - Syntax-highlighted TypeScript output — keywords, type names, primitives, and punctuation in distinct colors for easy scanning
- Copy to clipboard + Download as
.tsfile — drop directly into yourtypes/folder; pair with the JSON Table Viewer to inspect the actual data while typing against your new interfaces - 100% client-side — no server, no account, works offline; your API responses never leave the browser
How to Use
Basic conversion: Paste any JSON object into the left input panel. The TypeScript interfaces appear instantly in the right panel. Click Copy to copy to clipboard or Download .ts to save the file. Load the Sample JSON to see a realistic example with nested objects and arrays.
Naming the root interface: Change the Root name field in the header to whatever your top-level type should be called — ApiResponse, UserPayload, OrderData. Nested object keys derive their own names automatically (a "user" key becomes User, "shippingAddress" becomes ShippingAddress).
Interface vs type alias: Use the interface / type toggle to switch between interface Root {} and type Root = {}. The generated output is functionally identical for object shapes — choose based on your project's code style.
Optional fields: Enable the optional toggle to add ? to every property: name?: string. Use this when generating types for partial update requests, form data, or APIs where fields may be absent.
Handling null values: When your JSON contains null values, the null as control sets the TypeScript type: null is most precise (requires strictNullChecks), unknown forces a type guard before use (safest for external APIs), any disables checking (least safe).
Array syntax: Toggle between T[] (concise and idiomatic in most TypeScript codebases) and Array<T> (explicit, useful in complex generic expressions). Both are semantically identical.
Large API responses: Format your JSON in the JSON Formatter first to verify it's valid, then paste the clean JSON here. For API responses that are root-level arrays (like [{...}, {...}]), the tool generates the element interface using the singularized root name.
Common Use Cases
types/ folder. You'll have a complete, accurate type layer in minutes rather than hours.unknown as the null-as setting for untrusted external data, which forces explicit type checks in your code before accessing nullable fields.Frequently Asked Questions
Paste your JSON into the left input panel — TypeScript interfaces appear instantly in the right panel. Click Copy or Download .ts to use the output.
JSON strings → string, numbers → number, booleans → boolean, null → null / unknown / any (your choice), arrays → T[] or union types, nested objects → separate named interfaces.
Each nested object generates its own interface. The name is derived from the JSON key in PascalCase — "userAddress" becomes UserAddress. Parent interfaces reference child interfaces by name.
Arrays of objects are merged — all items are combined into one interface covering every key across all elements. The interface name is singularized from the array key (users → User, posts → Post).
interface supports declaration merging (useful for library types). type is closed by default and more flexible for unions and mapped types. For plain object shapes from JSON, both are functionally identical — pick whichever your codebase uses.
It adds ? to every property (key?: type), making all fields optional. Use it for partial update types or APIs where fields may be absent.
null is the most precise type and works with strictNullChecks in tsconfig. unknown is the safest choice for untrusted external data — TypeScript forces you to check the value before using it. any skips type checking entirely.
Yes. If your JSON is an array like [{...}, {...}], the tool generates an interface for the element type using the singularized root name. The root type is Root[] (or whatever you named it).
Yes. Download the .ts file and drop it into your types/ folder. With the export toggle on (default), all interfaces are exported and can be imported anywhere in your project.
Completely free, no sign-up. All conversion runs in your browser — no data is sent to any server. You can safely paste sensitive API responses or private data structures.