JSON to TypeScript Generator

How This JSON to TypeScript Generator Works

This tool first parses your JSON, then walks the resulting value and infers a structural shape for every object and array it finds — entirely in your browser, with no server round-trip. The interesting part isn't converting a single flat object (that's a one-to-one mapping); it's what happens with arrays of many objects, which is where most simple converters fall short.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based data format built from objects (key-value pairs), arrays, strings, numbers, booleans, and null. It's the default format for REST APIs, configuration files, and data interchange between services — but it carries no type information at all: every consumer has to guess or document the shape of the data separately.

What is TypeScript?

TypeScript is a statically typed superset of JavaScript that adds interfaces, type aliases, enums, generics, and compile-time type checking. Interfaces and types describe the exact shape of a JSON payload, so your editor can autocomplete property names, and the compiler can catch a typo or a missing field before your code ever runs.

Why Convert JSON to TypeScript?

Manually writing an interface for a large or deeply nested API response is slow and error-prone — it's easy to miss an optional field, mistype a property name, or forget that a value is sometimes null. Generating the interface directly from a real JSON sample guarantees it matches reality, and updates in seconds when the API response shape changes.

Type Inference: Merging Shapes Across Array Items

When your JSON contains an array of objects, this generator doesn't just look at the first item. It infers a shape for every item and merges them: a field present in every item stays required; a field missing from at least one item becomes optional (?); a field whose value type differs between items (say, a number in one and a string in another) becomes a union type. This is what makes the output reflect the real variability of API data instead of just one lucky sample.

// Input
[
  { "id": 1, "name": "Ada", "email": "ada@example.com" },
  { "id": 2, "name": "Bob" }
]

// Output — "email" is optional because item #2 doesn't have it
export interface Root {
  id: number;
  name: string;
  email?: string;
}

Nested Objects

Every nested object gets its own named interface, generated from the property path it was found at (for example, an address field becomes RootAddress). This keeps the output readable instead of collapsing everything into deeply inlined, unreadable object literals.

Nested Arrays & Arrays of Arrays

Arrays are typed based on their (merged) element shape: an array of strings becomes string[], an array of objects becomes OrderItem[] with a generated interface, and an array of arrays becomes a nested array type like number[][]. An empty array with no items to infer from becomes unknown[] so it still type-checks safely without you having to guess.

Optional vs. Nullable Properties

These are two different concepts this generator keeps distinct: optional (field?: T) means the key can be missing entirely; nullable (field: T | null) means the key is always present but its value can be null. Use the Null Handling setting to choose whether nullable fields become a union with null, get marked optional instead, or both.

Union Types & Literal Types

When a field's merged type set contains more than one primitive kind, or more than one distinct object shape that couldn't be merged, the output is a union type such as string | number. Enable Enum Detection and a repeated string field with a small set of distinct values (like a status field) becomes a string literal union — "active" | "inactive" | "pending" — or a named enum if you choose Named Enum instead.

Dynamic Keys & Record<string, T>

Some JSON objects use unpredictable keys as a lookup table — a map of user IDs to user records, for example — rather than a fixed set of named fields. With Detect Dynamic Keys enabled, an object with four or more keys that all look machine-generated (all-numeric, or all UUIDs) is generated as an index signature, Record<string, ValueType>, instead of one interface field per key.

// Input
{ "a1e4": { "score": 10 }, "b2f5": { "score": 20 }, "c3a6": { "score": 5 }, "d4b7": { "score": 8 } }

// Output
export interface Root {
  [key: string]: RootValue;
}
export interface RootValue {
  score: number;
}

Deduplicating Identical Shapes

Two structurally identical objects at different paths in your JSON — a billingAddress and a shippingAddress with the same fields, for instance — are detected as the same shape and generate one shared interface instead of two redundant copies, when Deduplicate Identical Shapes is enabled.

Empty Objects and Empty Arrays

An empty object ({}) with no observed keys becomes Record<string, unknown>, and an empty array becomes unknown[] — both are valid, safe TypeScript that won't silently allow any-typed access.

Interfaces vs. Types vs. Classes

All three declaration kinds this generator can output describe the same object shape — the right choice usually comes down to your codebase's existing convention rather than a hard technical requirement.

JSON vs. TypeScript

ToolAdda vs. QuickType vs. Transform.tools

Using Generated Types in React, Angular, Vue & Node

The generated interfaces drop straight into any TypeScript codebase. Here's how they're typically used across common frameworks and stacks.

import type { Root } from "./types";

function UserCard({ user }: { user: Root }) {
  return <h2>{user.name}</h2>;
}

// Fetching and typing an API response
const res = await fetch("/api/user");
const user: Root = await res.json();

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Root } from './root.model';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
  getUser(): Observable<Root> {
    return this.http.get<Root>('/api/user');
  }
}

<script setup lang="ts">
import type { Root } from './types';
import { ref, onMounted } from 'vue';

const user = ref<Root | null>(null);
onMounted(async () => {
  user.value = await (await fetch('/api/user')).json();
});
</script>

import express, { Request, Response } from 'express';
import type { Root } from './types';

const app = express();
app.get('/api/user', (req: Request, res: Response<Root>) => {
  res.json({ id: 1, name: 'Ada', tags: ['admin'] });
});

import { Body, Controller, Post } from '@nestjs/common';
import { RootDto } from './root.dto';

@Controller('users')
export class UsersController {
  @Post()
  create(@Body() body: RootDto) {
    return body;
  }
}

Best Practices & Common Mistakes

Best Practices

1. Generate types from a real API response, not a hand-written example — the auto optional/nullable detection is only as good as the sample data.
2. Paste a few array items rather than just one, so the merge-based optional-field detection has something to compare against.
3. Use a Dto or Response suffix for API-facing types to keep them visually distinct from your internal domain models.
4. Turn on Readonly Properties for props and state you don't want accidentally mutated.
5. Re-generate whenever the upstream API response shape changes, instead of hand-patching an old interface.

Common Mistakes

• Trusting a single sample too much — one API response won't reveal every optional or nullable field; use several examples if you can.
• Using any instead of generated types — this defeats the entire purpose of TypeScript's compile-time checking.
• Forgetting nested arrays of objects — always check that deeply nested interfaces were generated with sensible names before committing the output.
• Ignoring union types — a field typed string | number usually needs a runtime check before you use it, not a type assertion.

Large JSON Files & Performance

Conversion runs synchronously in your browser. For very large inputs (roughly 400KB and above), live conversion pauses automatically and waits for you to click Convert, so typing in the editor stays smooth instead of blocking on every keystroke.

Privacy & Security

Parsing, type inference, and code generation all happen inside your browser's JavaScript engine. No JSON or generated TypeScript is ever transmitted to ToolAdda's servers or any third party, which makes this safe to use even with sensitive API responses or internal data structures.

Related Developer Tools