JSON to TypeScript

What does the JSON to TypeScript Converter do?

The JSON to TypeScript Converter analyzes raw JSON objects, API responses, and nested document schemas to generate strongly-typed TypeScript interface or type alias definitions in real time. Executing 100% in-browser on blueutils.com, it infers primitive types (string, number, boolean), extracts nested objects into reusable sub-interfaces, and formats clean TypeScript code for frontend and backend codebases.

• Real-Time Zero-Latency Generation: Generates type definitions instantly as you type, with live type count badges (X Types).
• Flexible Declaration Formats: Generates standard extendable TypeScript interface blocks or type aliases (type X = { ... }).
• Deep Recursive Sub-Type Extraction: Decouples nested objects and array element models into named, reusable TypeScript interfaces (e.g. Profile, Item).

Core Concepts & Technical Specifications

1. Type Inference Rules:
   • Primitives: Maps JSON strings to string, numbers to number, booleans to boolean, and null to any.
   • Arrays: Inspects array element shapes to generate uniform arrays (string[], Item[]), union arrays ((string | number)[]), or fallback generic any[].
   • Nested Objects: Decouples nested objects into standalone PascalCase sub-interfaces (e.g., user.address becomes export interface Address { ... }).
2. Interfaces vs. Type Aliases:
   • Interfaces (interface User { ... }): Idiomatic for OOP models, declaration merging, and extendable API contracts.
   • Type Aliases (type User = { ... }): Idiomatic for functional codebases, union types, and immutable shapes.
3. In-Browser Privacy:
   • All type inference algorithms run locally in browser memory.
   • Proprietary API payloads and sensitive schema structures are never sent to remote servers.

How to use the tool?

1. Input JSON Payload:
   • Paste a raw JSON object, array response, or sample API payload into the left editor, click Upload to load a local file, or click Sample to load an example payload.
2. Configure Generator:
   • Set Root Type Name (defaults to RootObject).
   • Choose between Interfaces and Type Aliases from the top toolbar.
3. Copy or Download:
   • Generated TypeScript definitions appear instantly on the right. Click Copy to copy to your clipboard or Download to save as output.ts.

Pipeline & Contextual Workflows

• Frontend API SDK Generation: Paste backend API response payloads here to generate typed contracts for React, Angular, or Vue clients.
• Payload Validation: Validate JSON document syntax and line numbers before generating types using JSON Syntax Validator.
• JSON Schema Compilation: Compile schemas into structured formats or validate schema integrity with JSON Schema Validator.

REST API Integration

blueutils.com provides a free REST API endpoint (POST https://blueutils.com/api/json/to-typescript) for automated SDK generation, CI/CD code generation pipelines, and CLI tooling.

API Request Parameters

API Request Payload Examples

cURL (Using Direct JSON Object)

curl -X POST https://blueutils.com/api/json/to-typescript \
  -H "Content-Type: application/json" \
  -d '{
    "json": {
      "id": 101,
      "name": "Jane Doe",
      "active": true,
      "profile": {
        "bio": "Senior DevOps Engineer"
      }
    },
    "rootName": "UserResponse"
  }'

cURL (Using Raw String & Type Alias Option)

curl -X POST https://blueutils.com/api/json/to-typescript \
  -H "Content-Type: application/json" \
  -d '{
    "rawText": "{\"id\":101,\"name\":\"Jane Doe\",\"active\":true}",
    "rootName": "UserResponse",
    "useTypeAlias": true
  }'

Python

import requests

url = "https://blueutils.com/api/json/to-typescript"
payload = {
    "json": {
        "id": 101,
        "name": "Jane Doe",
        "active": True
    },
    "rootName": "UserResponse",
    "useTypeAlias": False
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "rawText": "{\\"id\\":101,\\"name\\":\\"Jane Doe\\",\\"active\\":true}",
                "rootName": "UserResponse"
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/json/to-typescript"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "result": "export interface Profile {\n  bio: string;\n}\n\nexport interface UserResponse {\n  id: number;\n  name: string;\n  active: boolean;\n  profile: Profile;\n}",
  "data": {
    "id": 101,
    "name": "Jane Doe",
    "active": true
  },
  "originalSize": 58,
  "resultSize": 142
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid JSON syntax: Unexpected token '}' at position 15 (Line 1, Column 16)"
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to convert JSON to TypeScript?

Programmatic TypeScript generation accelerates development across multi-tier applications:

• Automated API Client SDKs: Generates typed TypeScript contracts directly from live staging endpoints or test fixtures during CI/CD builds.
• LLM Context Minimization: AI models often generate verbose, hallucinated interface signatures. Calling the API produces deterministic interfaces with zero token bloat.
• Recursive Structural Integrity: Automatically names and extracts nested objects without creating unwieldy inline objects.

Native Usage

Generate TypeScript interfaces locally across code editors and programming runtimes:

VS Code & quicktype Extension

1. Copy JSON data to clipboard.
2. Open a .ts file and press Ctrl+Shift+P (or Cmd+Shift+P on macOS).
3. Select Paste JSON as Code to generate typed interfaces instantly.

Linux / macOS (npx json-to-ts)

# Generate TypeScript interfaces from JSON file
npx -y json-to-ts input.json

Windows (PowerShell)

# Generate TypeScript interfaces using json-to-ts in PowerShell
npx -y json-to-ts input.json

Python

import json

def json_to_ts_type(val):
    if isinstance(val, bool): return "boolean"
    if isinstance(val, (int, float)): return "number"
    if isinstance(val, str): return "string"
    if isinstance(val, list): return f"{json_to_ts_type(val[0])}[]" if val else "any[]"
    if isinstance(val, dict): return "{\n" + "\n".join([f"  {k}: {json_to_ts_type(v)};" for k, v in val.items()]) + "\n}"
    return "any"

data = {"id": 101, "name": "Jane Doe", "active": True}
print(f"export interface RootObject {json_to_ts_type(data)}")

Java (Jackson)

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import java.io.File;

public class Main {
    public static void main(String[] args) throws Exception {
        ObjectMapper mapper = new ObjectMapper();
        JsonNode root = mapper.readTree(new File("data.json"));

        StringBuilder ts = new StringBuilder("export interface RootObject {\n");
        root.fieldNames().forEachRemaining(field -> {
            JsonNode val = root.get(field);
            String type = val.isNumber() ? "number" : val.isBoolean() ? "boolean" : "string";
            ts.append("  ").append(field).append(": ").append(type).append(";\n");
        });
        ts.append("}\n");
        System.out.println(ts.toString());
    }
}