How does it handle arrays of differing object shapes?

It unions them. If your array contains both `{a: 1}` and `{b: 2}`, the element type becomes `{a: number} | {b: number}`. If they overlap (both have `id` but only one has `name`), the merged interface marks `name` as optional with `name?: string`.

Why do null fields appear as `null` not `undefined`?

Because JSON has explicit null values that survive serialization, while `undefined` doesn't. If your API returns `{manager: null}`, the type should match. To express "may be missing or null", make it optional and union with null: `manager?: string | null`.

Will it deduplicate identical nested interfaces?

No — each nested object position gets a distinct named interface based on its key path. If two interfaces happen to be structurally identical, you can manually merge them in your editor. (Auto-deduplication adds risk that two coincidentally-identical types collapse when they shouldn't.)

Can it handle JSON Schema or OpenAPI specs?

No — those are different formats with their own structure. For OpenAPI to TypeScript, use openapi-typescript or similar. This tool is for raw JSON values only.

What if my JSON has weird key names like "first-name"?

It quotes them: `"first-name": string;`. TypeScript supports quoted keys for non-identifier strings; you'll access them with bracket notation (`obj["first-name"]`).

Developer Utilities · Free tool

JSON to TypeScript Interface

Paste JSON to get matching TypeScript types with optional and nullable fields in seconds—free online tool, no sign-up or download needed.

Updated June 2026

Root type namePaste JSON

interface Root {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
  profile: Profile;
}

interface Profile {
  age: number;
  city: string;
}

Found this useful?Email Buy Me a Coffee

What it does

Paste any JSON object — an API response, a config file, a mock fixture — and get a matching TypeScript interface with all the right field types, nested object shapes, array element types, and optional markers (?:) for keys that are missing in some siblings. The output is ready to paste into a .ts file with no follow-up cleanup.

The inference handles every JSON value shape: strings stay string, numbers stay number, booleans stay boolean, null becomes null (not optional, since explicit null is meaningful), arrays of objects produce a single inferred interface for the elements (we union differing shapes so you don't lose data), and nested objects each get their own named interface. Mixed-type arrays (e.g. [1, "two", true]) produce a union: (number | string | boolean)[].

Useful when integrating with an API where you don't have types yet — paste a sample response, get an interface, drop it into your repo. Also great for prepping mock data fixtures: the inferred shape becomes the contract.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/json-to-typescript" width="100%" height="720" frameborder="0" loading="lazy" title="JSON to TypeScript Interface" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

Example input & output

Input

{"id": 42, "name": "Alice", "tags": ["admin", "ops"], "manager": null, "team": {"id": 7, "name": "Platform"}}

Output

interface Team {
  id: number;
  name: string;
}
interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: null;
  team: Team;
}

Each nested object gets its own named interface. The `null` field is preserved literally because explicit nulls in JSON usually mean "present but empty", which is structurally different from "absent".

How to use it

Paste your JSON into the input box. Multi-line is fine — a JSON formatter normalizes whitespace before inference.
Name the root interface (default: 'Root'). Use PascalCase to match TypeScript conventions.
The output regenerates live as you type — no convert button.
Click Copy to grab the generated interfaces. Multiple interfaces are emitted in dependency order so you can paste the whole block at once.
If you spot a field you want optional, manually add `?` after the key — the tool's optional inference only catches keys missing across array siblings, not user-intent optionals.

When to use this tool

Generating types for a new API endpoint you're integrating with.
Prepping fixture types from a real API response so your mocks stay in sync.
Migrating a JS codebase to TypeScript — paste each domain object's shape and start with auto-inferred types.
Documenting a config file format (paste an example, get a self-describing interface).

When not to use it

Generating Zod / io-ts / runtime validators — those need a schema with refinement rules; this is pure type inference.
Inferring discriminated unions — the tool will union differing object shapes naively. For tagged-union types, design the interface manually.
Highly recursive structures (a tree where children have the same shape as parent) — output uses generated names, not self-references; you may need to rename.
Anything where types must be exact (`5` not `number`) — use TypeScript literal types manually for those cases.

Frequently asked questions

How does it handle arrays of differing object shapes?: It unions them. If your array contains both `{a: 1}` and `{b: 2}`, the element type becomes `{a: number} | {b: number}`. If they overlap (both have `id` but only one has `name`), the merged interface marks `name` as optional with `name?: string`.
Why do null fields appear as `null` not `undefined`?: Because JSON has explicit null values that survive serialization, while `undefined` doesn't. If your API returns `{manager: null}`, the type should match. To express "may be missing or null", make it optional and union with null: `manager?: string | null`.
Will it deduplicate identical nested interfaces?: No — each nested object position gets a distinct named interface based on its key path. If two interfaces happen to be structurally identical, you can manually merge them in your editor. (Auto-deduplication adds risk that two coincidentally-identical types collapse when they shouldn't.)
Can it handle JSON Schema or OpenAPI specs?: No — those are different formats with their own structure. For OpenAPI to TypeScript, use openapi-typescript or similar. This tool is for raw JSON values only.
What if my JSON has weird key names like "first-name"?: It quotes them: `"first-name": string;`. TypeScript supports quoted keys for non-identifier strings; you'll access them with bracket notation (`obj["first-name"]`).

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →