JSON to TypeScript Interface

Convert any JSON object into TypeScript interfaces instantly — handles nested objects, arrays, union types, optional fields, and generics.

Last updated: March 25, 2026

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is JSON to TypeScript Interface?

TypeScript's power comes from its type system — but typing API responses, config objects, and database records by hand is tedious and error-prone. The JSON to TypeScript interface generator automates this: paste any JSON object and the tool generates accurate TypeScript interfaces by inspecting each field's actual value and type. This is the same inference used by tools like json2ts, MakeTypes, and VS Code's "Paste JSON as Code" extension.

The generator handles all TypeScript type structures you'll encounter in real APIs: **nested objects** become named child interfaces; **arrays of objects** produce typed arrays (User[]); **mixed-type arrays** produce union types ((string | number)[]); **null values** produce field | null; fields that appear in some but not all objects in an array become optional (field?: type). The output is production-ready TypeScript code that you can paste directly into your project.

How to Use JSON to TypeScript Interface

Paste your JSON into the input panel — API response, config file, mock data, or any valid JSON

(Optional) Change the root interface name (default: Root) to match your domain model (User, Product, ApiResponse)

Click "Generate" or wait for auto-generation — all nested interface names are derived from the property key name

Review the output — all interfaces appear ordered with children first, root interface last (dependency order)

Click "Copy" to copy the TypeScript code, or use "Download" to save as a .ts file

Common Use Cases

Generating TypeScript types for a REST API response before writing the fetch call
Typing configuration objects from JSON config files (next.config.json, tsconfig.json custom sections)
Creating initial type definitions when migrating an existing JavaScript codebase to TypeScript
Documenting a third-party API's payload structure by pasting a real response and exporting the types
Generating types for database JSON columns (PostgreSQL jsonb, MongoDB documents) to type ORM query results
Bootstrapping Zod schema definitions by generating the base TypeScript types first
Creating prop types for React components that receive data from an API with a known JSON structure
Generating types from a webhook payload example (Stripe, GitHub, Shopify) to type the handler function

Example Input and Output

Generating TypeScript interfaces from a REST API user response:

JSON input (API response)

{
  "id": 42,
  "username": "alice",
  "email": "alice@example.com",
  "verified": true,
  "score": 98.5,
  "tags": ["admin", "beta"],
  "address": {
    "street": "123 Main St",
    "city": "Portland",
    "country": "US"
  },
  "preferences": null
}

Generated TypeScript interfaces

export interface Address {
  street: string;
  city: string;
  country: string;
}

export interface Root {
  id: number;
  username: string;
  email: string;
  verified: boolean;
  score: number;
  tags: string[];
  address: Address;
  preferences: null;
}

Client-Side Processing

All JSON parsing and TypeScript generation runs in your browser. Your API payloads, config data, or any sensitive JSON is never transmitted to our servers.

Refining Generated Types

Generated types are a starting point — always review and refine: (1) Replace "null" types with "string | null" or "?: string" based on API behavior. (2) Rename interfaces from the auto-generated names to match your domain model. (3) Add JSDoc comments to key fields for IDE hover documentation. (4) If a field can be multiple types (discrimination union), add a discriminated union: type Result = { type: "success"; data: T } | { type: "error"; message: string }.

VS Code JSON-to-Types Extension

VS Code's "Paste JSON as Code" extension (quicktype) offers the same functionality directly in your editor: copy JSON, then "Paste JSON as TypeScript" to insert interfaces at the cursor. The quicktype CLI supports 20 languages beyond TypeScript (Kotlin, Swift, Go, Python dataclasses, Rust). For CI/CD pipelines, quicktype can auto-generate types from an OpenAPI spec or JSON Schema on every build.

Frequently Asked Questions

How are nested objects handled?

Each nested object generates its own named interface. The interface name is PascalCase-derived from the property key: an "address" key produces an Address interface; a "userProfile" key produces UserProfile. All nested interfaces are emitted above the root interface in dependency order, so the output is always valid TypeScript with no forward references.

What happens with arrays of mixed types or objects?

Arrays of a single primitive type produce simple typed arrays: ["a", "b"] → string[]. Arrays of numbers → number[]. Arrays of objects generate a sub-interface and produce SubInterface[]. Mixed-type arrays produce union types: [1, "two", null] → (number | string | null)[]. Arrays of objects with inconsistent shapes (some objects have a field, others don't) produce interfaces with optional fields marked with ?: for the missing fields.

How is null handled? Should I use null or undefined in TypeScript?

A JSON null value produces a null type for that field. You can manually expand this to string | null or make it optional (field?: string). In TypeScript, null and undefined are distinct: null is an explicit "no value" (like a missing database column); undefined means "not present/not set". For API responses: use T | null for fields that the API explicitly returns as null; use T | undefined for fields that may not be present in the response at all.

Can I generate Zod schemas instead of interfaces?

This tool generates TypeScript interface declarations. To get Zod schemas: use the generated interfaces as a reference, then write z.object({ field: z.string(), ... }) with matching types. Tools like ts-to-zod (npm) can auto-convert TypeScript interfaces to Zod schemas. Alternatively, use json-to-zod directly for generating Zod validators from JSON. For runtime validation, Zod is preferred; for compile-time types only, TypeScript interfaces are leaner.

What if a field name is not a valid TypeScript identifier?

JSON keys can contain hyphens, spaces, or start with numbers — all invalid as TypeScript property names. The generator quotes these fields: "my-field": string becomes "my-field": string (in bracket notation) or the field is renamed to a camelCase equivalent myField: string with a comment. In your code: use bracket notation (obj["my-field"]) or destructure with renaming: const { "my-field": myField } = obj.

Does this handle large or deeply nested JSON structures well?

The generator supports arbitrary nesting depth. However, very deeply nested JSON (10+ levels) produces many interfaces, which can be hard to manage. For deeply nested data from real APIs, consider using TypeScript utility types to simplify: if an inner shape is reused, extract it to a shared interface; use Partial<T>, Pick<T, K>, and Omit<T, K> to create variants without duplicating. For very large payloads (1000+ fields), the generator may be slower — paste a representative sample instead.

How This Tool Works

The JSON string is parsed via JSON.parse() into a JavaScript object. A recursive type inference function walks each node: primitives return their TypeScript type name (string, number, boolean, null). Objects recurse into each key/value pair and produce interface declarations. Arrays inspect their items: if all items have the same type, the array is typed T[]; if mixed, a union type is produced. Interface names are derived from property keys by PascalCasing the key name. Output interfaces are collected in a dependency map and emitted in topological order.

Technical Stack

JSON.parse() type inferenceRecursive type walkerPascalCase name derivationTypeScript interface formatterClient-side only