Stax
Tools

JSON to TypeScript Generator

Convert JSON objects to TypeScript interfaces instantly.

interface Root {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
  score: number;
  address: Address;
  tags: string[];
  createdAt: string;
}

interface Address {
  street: string;
  city: string;
  pincode: string;
}

ℹ️ Arrays are typed from the first element. Nested objects become separate interfaces. Optional fields (null values) are typed as null — mark them field?: Type manually if needed.

JSON to TypeScript Interface Generator — Auto-Generate Typed Interfaces from Any JSON

When building TypeScript applications that consume REST APIs or work with complex data structures, writing TypeScript interfaces by hand is tedious, error-prone, and slow. A deeply nested API response with 30+ properties across multiple objects can take 20 minutes to type accurately — and any property name typo or incorrect type assignment creates a bug that only shows up at runtime. This tool generates complete, correct TypeScript interfaces from any valid JSON in under a second.

How to convert JSON to TypeScript

Paste your JSON into the left panel — this can be an API response you copied from a browser Network tab, a sample payload from your backend, or any valid JSON object or array. Set your preferred root interface name (e.g., "ApiResponse", "UserProfile", or "OrderData") in the input above the editor. The TypeScript interface output updates instantly in the right panel. For nested objects, the tool generates separate named interfaces (e.g., an "address" field becomes an "AddressInterface" with its own interface declaration). Arrays are typed with the item type (e.g., "items: OrderItemInterface[]"). Click Copy to grab the full output and paste it directly into your TypeScript project.

How the type inference works

The converter walks your JSON structure recursively. Primitive values map to their TypeScript equivalents: strings become "string", numbers become "number", booleans become "boolean", and null values become "null". When a value could be null or a type (from nullable API fields), the converter uses a union type (e.g., "string | null"). Arrays infer their item type from the first element — if an array contains objects, those objects become a separate interface. Mixed-type arrays produce union types ("string | number"). Empty arrays become "unknown[]" since the item type cannot be inferred. Deeply nested objects generate a named interface for each level, keeping the output organised and readable.

Who uses this tool

Full-stack TypeScript developers use it every time they integrate a new third-party API — paste a sample response and get typed interfaces immediately without reading through lengthy API documentation first. Backend developers who write TypeScript servers use it to quickly type incoming request bodies from API clients. TypeScript beginners use it to learn how complex JSON structures translate to TypeScript interface patterns. Teams doing API-first development use it to generate interface stubs from mock API responses during design phases before the backend is complete.

Privacy and data handling

All JSON parsing and TypeScript generation runs 100% in your browser — your API responses, payload data, and code are never sent to any server or stored anywhere outside your current browser session.

Frequently asked questions

How does JSON to TypeScript conversion work?
The tool recursively walks your entire JSON structure. Objects become TypeScript interfaces, arrays infer their item type from the first element, and primitive values map to string, number, boolean, or null types. Nested objects generate their own separately named interfaces, keeping the output clean and reusable.
Does it handle nested objects and arrays?
Yes. Nested objects generate their own named interface — for example, an address field becomes an AddressInterface. Arrays are typed as Array or the item type followed by []. The tool handles multiple levels of nesting automatically and generates a separate interface for each unique nested object shape.
What happens with mixed-type arrays?
If an array contains elements of different types — for example, a mix of strings and numbers — the tool generates a TypeScript union type such as (string | number)[]. Empty arrays that have no elements to infer from are typed as any[] since the item type cannot be determined from the data alone.
Can I customise the root interface name?
Yes. There is a 'Root interface name' input field at the top of the tool. Change it from the default RootObject to any name you prefer — for example ApiResponse, UserData, or OrderPayload — and the output updates instantly to reflect your chosen name throughout all generated interfaces.
Is my JSON data sent to a server?
No. All conversion happens entirely in your browser using JavaScript. Your JSON data never leaves your device, which makes this tool safe to use with API responses that contain customer records, authentication tokens, or other sensitive application data.

Related tools