JSON to TypeScript Type Generator

Your API returns a 40-field JSON response with nested objects and arrays. You’re writing TypeScript and need an interface that matches the shape exactly — so you get autocomplete, type checking, and compile-time errors when the API changes. Writing the interface by hand means 40 lines of fieldName: type; declarations, and if one field is sometimes absent, you need to remember fieldName?: type with the question mark.

Why This Generator (Not quicktype.io)

quicktype.io is a popular JSON-to-TypeScript tool. This generator adds interface vs type alias mode, readonly modifier, optional property detection (fields missing in some array elements become ?), and export keyword toggle — options that matter for production TypeScript. Everything runs in your browser; no data is sent anywhere.

What Is a JSON to TypeScript Type Generator?

When building TypeScript applications that consume APIs, configuration files, or any JSON data, you need TypeScript types that match the shape of that data. Writing these types by hand is tedious and error-prone — especially for deeply nested JSON structures with dozens of fields.

A JSON to TypeScript generator reads your JSON and automatically produces correct interface or type alias declarations, handling:

• Nested objects (each becomes its own named interface)
• Arrays of objects (merged into a single interface with optional fields for missing keys)
• Primitive values (string, number, boolean, null)
• Mixed arrays with union types ((string | number)[])
• Special property names that require quoting (e.g., "content-type")

This tool runs entirely in your browser — your JSON data never leaves your device.

How to Use This Tool

1. Paste your JSON in the JSON Input textarea (or click Load sample to try an example)
2. Configure options: root name, output mode, readonly, export, and optional properties
3. The TypeScript output updates instantly in the TypeScript Output panel
4. Click Copy to copy to clipboard, or Download .ts to save as a .ts file

Output Modes: interface vs type

TypeScript offers two ways to describe object shapes:

Interface declaration:

export interface User {
  id: number;
  name: string;
}

Type alias:

export type User = {
  id: number;
  name: string;
};

Both are structurally identical for most purposes. The key differences:

Use interface when you expect the type to be extended or implemented by a class. Use type when working with utility types, mapped types, or conditional types.

Naming Convention for Generated Types

The generator derives type names from the JSON property path using PascalCase:

• Root object → the name you specify (default: Root)
• Nested property profile → RootProfile
• Nested property social inside profile → RootProfileSocial
• Array property posts → element interface RootPostsItem, array type RootPostsItem[]

Property keys that are not valid JavaScript identifiers (containing hyphens, spaces, or starting with digits) are automatically quoted:

export interface HttpHeaders {
  "content-type": string;
  "x-request-id": string;
  authorization: string;
}

Options Explained

Root Name

The name given to the top-level type/interface. Defaults to Root. If your JSON represents a User object, set the root name to User for cleaner output.

readonly Properties

Adds the readonly modifier to every property, preventing reassignment:

export interface Root {
  readonly id: number;
  readonly name: string;
}

Use readonly when your types represent immutable data (API responses, configuration objects).

Optional Properties (?)

Marks every property as optional with ?. Useful when some fields may be absent at runtime:

export interface Root {
  id?: number;
  name?: string;
}

Note: properties that are genuinely absent in some array elements are automatically marked optional even without this option enabled.

export Keyword

Prepends export to each declaration, making it importable by other modules:

export interface Root { ... }

Disable if you are declaring types inside a namespace or a declaration file where export would be inappropriate.

Handling Arrays of Objects

When a JSON array contains objects, the generator merges all objects in the array into a single interface. Properties that are present in only some of the array elements become optional:

Input JSON:

{
  "posts": [
    { "id": 1, "title": "Hello World", "published": true },
    { "id": 2, "title": "TypeScript Tips" }
  ]
}

Generated output:

export interface Root {
  posts: RootPostsItem[];
}

export interface RootPostsItem {
  id: number;
  title: string;
  published?: boolean;
}

The published field is optional because it is missing from the second object.

Handling null Values

JSON null maps to TypeScript null:

export interface Root {
  name: string;
  deletedAt: null;
}

If a field can be either a value or null in practice (the JSON happens to have null in this sample), consider manually widening the type to string | null after generation. The tool generates types based on the actual data provided, not hypothetical data shapes.

Mixed-Type Arrays

Arrays containing a mix of types are expressed as union arrays:

{ "values": [1, "hello", true, null] }

Generates:

export interface Root {
  values: (number | string | boolean | null)[];
}

Common Use Cases

API Response Typing

Paste the raw JSON from a fetch() response or a tool like Postman or Insomnia. Use the generated types to add type safety to your API calls:

const response = await fetch("/api/users/1");
const user: User = await response.json();

Configuration File Typing

If your application reads a JSON configuration file, generate types from a sample config to catch typos and missing fields at compile time.

Database Record Typing

When querying a database and getting back JSON rows, generate types for the row shape. This is especially useful with ORMs that return any or loosely typed results.

Third-Party API Integration

Most REST APIs provide sample responses in their documentation. Paste the sample response JSON and instantly get TypeScript types for the integration.

After Generating: Refining Your Types

The auto-generated types are a starting point. Consider refining them:

1. Narrow string types to string literals or enums:

   status: "active" | "inactive" | "pending"; // instead of string

2. Add | null to nullable fields:

   deletedAt: string | null; // if the field can be either a date string or null

3. Replace number with bigint for very large IDs:

   id: bigint; // if IDs exceed Number.MAX_SAFE_INTEGER

4. Use Date instead of string for date fields (after parsing):

   createdAt: Date; // after new Date(json.createdAt)

5. Deduplicate identical interfaces — if two generated interfaces are structurally identical, they can be merged into one.

FAQ

Does this tool handle JSON with comments (JSONC)?

No. Standard JSON.parse does not support comments. Remove comments before pasting, or use a preprocessor.

What happens if the JSON root is an array?

The tool generates a type alias for the root and a separate interface for the array elements:

export type Root = RootItem[];

export interface RootItem {
  id: number;
  name: string;
}

Can I change the interface names after generation?

Yes. Copy the output to your editor and use a rename refactor. Since all names follow a consistent ParentChild pattern, find-and-replace works well too.

What about deeply nested JSON (10+ levels)?

The generator handles arbitrary depth recursively. Each nested object level produces a new named interface. Very deep nesting may produce many interfaces, but all will be correctly named and typed.

Does the tool detect if all strings in an array are the same literal?

No. It maps all JSON strings to the string type. To create string literal union types, manually edit the generated output.

Will this work for JSON Schema or Swagger/OpenAPI specs?

The tool generates types from JSON data instances, not from JSON Schema definitions. For generating types from JSON Schema or OpenAPI specs, specialized tools like json-schema-to-typescript or openapi-typescript are more appropriate.