JSON to TypeScript

Convert JSON payloads into strongly typed TypeScript interface or type declarations recursively and client-side. Instantly generate clean, production-ready TypeScript code from raw REST API responses, GraphQL payloads, or configuration files without uploading data to external servers.

Root Name:

Declaration Type:

Make Properties Optional (?)

JSON Payload Input

TypeScript Type Declarations

Loading Tool...

Learn About This Tool

Accelerating Frontend Development with TypeScript Generators

TypeScript enforces compile-time type safety across frontend and backend applications by declaring interfaces for API parameters and payload responses. Hand-writing interface declarations for deeply nested or large API responses is tedious, error-prone, and unsustainable during rapid prototyping. This tool automatically inspects your raw JSON input, recursively infers data types, and outputs sanitized TypeScript definitions in real time.

// Input JSON Payload:
{
  "user_id": 101,
  "account": {
    "username": "alex_dev",
    "roles": ["admin", "editor"],
    "is_verified": true
  }
}

// Generated TypeScript Interface:
export interface Account {
  username: string;
  roles: string[];
  is_verified: boolean;
}

export interface RootObject {
  user_id: number;
  account: Account;
}

Automatically maps primitive property types (string, number, boolean, null)
Recursively builds nested sub-interfaces for child objects and object arrays
Prevents runtime undefined exceptions by catching schema mismatches early
Handles heterogenous arrays and optional fields dynamically

Customizable Output Declarations: Interface, Type, or Class

Different TypeScript project architectures favor distinct modeling paradigms. You can choose whether to compile output as standard interface definitions, flexible type aliases, or ES6 class declarations. If you need runtime validation schemas rather than static type declarations, check out our JSON Schema Tool to compile JSON Schema draft definitions.

Interface format: Recommended for object models and public API contracts
Type alias format: Ideal for union types, primitives, and tuple structures
Class format: Helpful when instantiating model domain entities with methods
Optional fields toggle (?): Appends optional modifiers to keys when schemas vary

Handling Null Values, Mixed Arrays, and Heterogeneous Schemas

Real-world API payloads often contain null values or arrays with varying element schemas across items. When encountering an array of objects, the compiler analyzes all array elements to construct a unified interface that satisfies all object variants. Fields present in some items but absent in others can be flagged as optional automatically.

Null properties infer as `any` or `null` union types based on configuration
Mixed arrays (e.g. `[10, "active"]`) infer as union array types `(number | string)[]`
Empty arrays `[]` default to `any[]` safely
PascalCase conversion turns keys like `billing_address` into `BillingAddress`

Validating JSON Syntax & Debugging Mismatches Client-Side

Before generating TypeScript types, our browser engine parses the input using native JSON validation routines. If syntax errors occur due to unquoted keys or trailing commas, use our JSON Formatter to inspect and auto-fix formatting issues instantly before conversion.

Catches JSON syntax violations before generating code
Executes 100% client-side in browser memory for complete privacy
Supports large payloads up to 10MB without latency
Preserves original property naming conventions or normalizes to camelCase

How to Use JSON to TypeScript

Paste Raw JSON Payload

Enter your raw API JSON response or configuration object into the left editor panel.

Configure Type Export Options

Set your desired Root Interface Name (e.g., `UserResponse`), select the target output declaration style (interface, type, or class), and toggle optional property flags.

Review & Copy Generated Code

The compiled TypeScript code renders instantly in the right output panel. Click `Copy Types` to copy the generated interface definitions to your clipboard for use in your project.

Code Implementations

Ready-to-use

Copy & paste production-ready code snippets for JSON to TypeScript in your language of choice

File: json_to_ts.py

Python

import json

def json_to_ts_interface(json_str: str, interface_name: str = "RootObject") -> str:
    data = json.loads(json_str)
    lines = [f"export interface {interface_name} {{"]
    for key, value in data.items():
        ts_type = "string"
        if isinstance(value, bool):
            ts_type = "boolean"
        elif isinstance(value, (int, float)):
            ts_type = "number"
        elif isinstance(value, list):
            ts_type = "any[]"
        elif isinstance(value, dict):
            ts_type = "Record<string, any>"
        lines.append(f"  {key}: {ts_type};")
    lines.append("}")
    return "\n".join(lines)

payload = '{"id": 1, "name": "Alex", "isActive": true}'
print(json_to_ts_interface(payload))

Frequently Asked Questions

It parses a raw JSON string, recursively infers primitive and object types, and generates valid TypeScript interface, type, or class declarations automatically.

It recursively inspects child objects, converts key names to PascalCase sub-interface titles (e.g., `user_profile` -> `UserProfile`), and links them back to parent interfaces.

If array items share a single primitive type, it outputs `string[]` or `number[]`. If items contain objects, it extracts a sub-interface and types the array as `SubInterface[]`.

Yes. Enable the 'Make Properties Optional' toggle option to append a question mark (?) after key names (e.g. `age?: number`).

JSON requires double-quoted property keys and string values, with no trailing commas or comments. Use our JSON Formatter to auto-fix syntax errors before generating types.

Yes. All parsing and string compilation occurs entirely inside your browser's local JavaScript engine. Zero network requests are sent to external servers.

Null values default to `any` or `null` union types. Empty arrays `[]` default to `any[]` because element schema cannot be inferred without items.

If multiple child keys resolve to identical PascalCase names with different schemas, the engine appends a numeric suffix (e.g., `Item` and `Item2`) to maintain unique interface names.

Yes. If the root input is a JSON array, the compiler infers the element schema and exports the root type as `type RootObject = ItemInterface[]`.

Selecting the `Class` export mode generates ES6 class structures with declared member fields, which you can copy into your codebase and extend with custom constructors.

Interfaces support declaration merging and are standard for object contracts, whereas Type aliases can represent primitives, unions, tuples, and mapped types directly.

Copy the exported interfaces into a `.types.ts` file in your React project, then import them into component props or `useState<UserResponse>()` hooks for full type safety.

Yes. Paste the `data` payload object returned by your GraphQL query response to generate TypeScript types matching your GraphQL query shape.

Press `Ctrl+L` (or `Cmd+L` on Mac) to clear the editor input instantly.