JSON to TypeScript Interface Generator β€” Convert JSON Online Free

Generate TypeScript interfaces from JSON

JSON Input
TypeScript Output

How Type Inference Works

  • Primitives β€” JSON string β†’ string, number β†’ number, boolean β†’ boolean, null β†’ null.
  • Objects β€” Each JSON object becomes a named interface (or type). Nested objects produce additional named interfaces whose names are derived from their parent key in PascalCase.
  • Arrays β€” When an array contains multiple objects, all samples are merged: fields present in every element become required; fields missing from any element are marked optional (?) when "Infer optional fields" is enabled.
  • Mixed arrays β€” An array containing both strings and numbers produces (string | number)[]. An array of objects and primitives produces a union type.
  • Empty arrays β€” Typed as unknown[] since the element type cannot be inferred.

interface vs type alias

interface is the idiomatic TypeScript construct for describing object shapes. It supports declaration merging (multiple interface declarations with the same name are merged by the compiler) and is generally preferred for public API contracts and class implementations. type is more flexible β€” it can represent unions, intersections, primitives, tuples, and mapped types β€” but does not support declaration merging. For plain object shapes generated from JSON, both are functionally equivalent. Choose interface as the default unless you need union types or are working in a codebase with a type-first convention.

Frequently Asked Questions

How should I handle null values?

A JSON field set to null is typed as null. In practice you usually want string | null or T | null. Enable "All fields optional" or manually edit the generated type to add the union. If the field is sometimes a string and sometimes null across different API responses, consider running both responses through the tool separately and merging by hand.

Why are some fields inferred as optional?

When "Infer optional fields" is enabled, the tool compares all objects in an array. If a key appears in at least one object but not all, it is marked optional (?). This mirrors real-world API responses where some fields are omitted rather than set to null when absent.

How do I use the generated interfaces in a project?

Copy the output and paste it into a .ts or .d.ts file. Then import and use: import type { Root } from './types';. For API responses, cast with const data = await res.json() as Root or use a validation library like Zod to parse and assert the shape at runtime.