What is JSON to TypeScript?

JSON to TypeScript turns JSON data into TypeScript interfaces and type definitions. It picks up strings, numbers, booleans, arrays, and nested objects, and marks nullable fields as optional with union types. Skip the tedious part of typing out API responses by hand.

When an array contains objects of slightly different shapes, the generator merges them: keys missing from some records become optional with a '?'. Nested objects each get their own named interface (User, UserAddress, UserAddressGeo). Mixed arrays produce union types like (string | number)[]. ISO 8601 date strings get flagged with a JSDoc hint, and string fields with a small repeating set of values are inferred as string literal unions instead of plain string. Beyond the TypeScript output you get three more tabs from the same input: a matching Zod schema, mock data seeded with realistic placeholder values, and a draft-07 JSON Schema. Switch between interface and type alias, toggle the export keyword, sort keys A→Z, and flip on camelCase to normalize snake_case or kebab-case keys into idiomatic TypeScript names.

How to use

1. Step 1 — Paste a JSON object or array, drag a .json file onto the input, or fetch live JSON from a URL. The tool analyzes the structure and infers TypeScript types for every field.
2. Step 2 — Customize the output: set the root interface name, choose between interfaces and type aliases, and toggle optional properties for fields that may be null.
3. Step 3 — Copy the output or download it. Four tabs share the same settings: TypeScript types, a matching Zod schema for runtime validation, ready-to-use mock data for tests and Storybook, and a draft-07 JSON Schema for OpenAPI or form libraries. All nested objects get their own named interfaces automatically.

When to use

• Typing an API response you don't have an OpenAPI/Swagger spec for.
• Generating quick types for a JSON config file (tsconfig.json, package.json) you're parsing in a script.
• Bootstrapping a typed wrapper around a third-party SDK response in seconds.

Result

Your API returns a user object with nested address and preferences. Paste the JSON response, set root name to 'User', and get clean interfaces: User, UserAddress, UserPreferences — with correct types like 'string | null' for optional fields.

FAQ

How does the generator decide which fields are optional?

If the input is a single object, fields with null values get marked optional when 'Mark Nullable as Optional' is on. For arrays of objects, the generator unions the keys across all records — anything missing from at least one record becomes optional.

What about arrays where the items have different shapes?

Same logic: keys present in every item stay required, keys present in some become optional, and values with mixed primitive types become unions like string | number. The result is one interface that describes the whole array.

Should I pick interface or type alias?

Interfaces are easier to extend with declaration merging and are the usual choice for API shapes. Type aliases work better when you want to combine with unions, intersections, or mapped types later. Both compile to the same runtime: pick whichever your codebase uses.

Why are some property keys wrapped in quotes in the output?

If a key contains characters that aren't valid as a bare TypeScript identifier — hyphens, spaces, leading digits, dots — the generator wraps it in quotes. That keeps the type valid, and you'll access the field as obj["weird-key"] in code.

Can the generated types catch API changes if the response shape changes?

Yes, if you regenerate after the change. The types describe a snapshot of the JSON you paste, so they won't auto-update. A common workflow is to regenerate types when the API version bumps and check the diff in code review.

Related Tools