Generate TypeScript Interfaces from JSON Automatically

One of TypeScript's most powerful features is static typing for API response data — but writing interfaces by hand for complex, deeply nested JSON responses is tedious and error-prone. Miss a field or use the wrong type and you'll get runtime errors that TypeScript was supposed to prevent. This tool solves that problem: paste any JSON object or array, and it generates the corresponding TypeScript interface definitions automatically, inferring the correct types for strings, numbers, booleans, null, nested objects, and arrays. It handles the common cases that make manual typing painful — optional fields (where some response objects have a key and others don't), nested objects (generating named sub-interfaces), and arrays of objects (generating a typed array interface). The result is production-ready TypeScript that you can paste directly into your codebase and refine as needed.

Open JSON Formatter →

What Is Generate TypeScript Interfaces from JSON Automatically?

TypeScript interface generation from JSON automatically infers a TypeScript interface definition from a JSON sample. Each JSON key becomes an interface property, and the tool infers TypeScript types from the value: string, number, boolean, null, nested object interfaces, or array types. This eliminates manual type-writing for API response structures.

How to Use the JSON Formatter

Step 1: Paste a representative JSON object or array into the input area above.
Step 2: Click 'Generate TypeScript Interface' to produce the interface definition.
Step 3: Review the generated interface — check that inferred types match your domain knowledge (e.g., a field that looks like a number might actually be an ID that should be a string).
Step 4: Rename the root interface from the default name to match your domain model (e.g., `UserResponse`, `ProductData`).
Step 5: Copy the generated interface and paste it into your TypeScript project.
Step 6: Add any missing union types, optional markers (?), or more specific types that the generator couldn't infer from the sample.

Example

// Input JSON:
{
  "userId": 4201,
  "username": "dev_maja",
  "isPremium": true,
  "profile": { "displayName": "Maja S.", "avatarUrl": "https://cdn.example.com/avatars/4201.png" },
  "tags": ["typescript", "react"]
}

// Generated TypeScript:
interface Profile {
  displayName: string;
  avatarUrl: string;
}

interface UserResponse {
  userId: number;
  username: string;
  isPremium: boolean;
  profile: Profile;
  tags: string[];
}

Pro Tips

Always use a complete, representative JSON sample — if the actual API sometimes returns a field as null, include a null value in your sample so the generator adds `| null` to the type.
For optional fields that only appear sometimes, manually add `?` to the property name in the generated interface — `fieldName?: string` instead of `fieldName: string`.
ID fields that look like numbers (e.g., `userId: 4201`) might be better typed as `string` or `number | string` depending on your API — review generated types before committing.
For arrays of objects, ensure your sample array contains at least 2-3 representative elements to help the generator infer a consistent type across all items.
After generating, use tools like `ts-json-schema-generator` or `zod` in your project to add runtime validation that complements the compile-time types TypeScript provides.

Ready to Try It?

Free, browser-based, no signup required.

Launch JSON Formatter Free →

FAQ's

Yes. The generator creates a named interface for each nested object, resulting in a set of related interfaces rather than a single flat one. Each nested object gets its own interface definition, which promotes reusability and makes the type hierarchy readable.

A JSON field with a null value is inferred as `null` type. Since null alone isn't useful as a type, you should manually update it to a union like `string | null` or `number | null` based on what the field contains when it's not null.

An array of strings generates `string[]`, an array of numbers generates `number[]`, and an array of objects generates a named interface for the object type and an `InterfaceName[]` type for the array. Empty arrays generate `unknown[]` — provide a populated sample for better inference.

Both work, but `interface` is generally preferred for object shapes that represent data models — they're extensible (can be augmented), slightly more performant in the TypeScript compiler, and their error messages are clearer. Use `type` for unions, intersections, or primitive aliases.

Yes. With Axios, use the generic parameter: `axios.get<UserResponse>('/api/user')`. With Fetch, cast the response: `const data = await response.json() as UserResponse`. Note that TypeScript cannot validate the runtime data — use Zod or io-ts for runtime type safety.

JSON samples contain one value per field. If a field can be multiple types at runtime (e.g., a status field that's a string or null), manually edit the generated interface to reflect reality: `status: 'active' | 'inactive' | null`.

This tool generates TypeScript interfaces. For Zod schema generation, tools like `json-to-zod` or the `ts-to-zod` pipeline (generate TypeScript first, then convert) are available. Zod schemas provide both compile-time types and runtime validation, making them more robust for API data.

Yes — generated interfaces can be used directly as React component prop types or as the type for `useState` hooks and `useEffect` dependency data. Just import the interface and use it wherever you type your component's data structures.