UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

JSON to TypeScript

Generate TypeScript types and interfaces from JSON samples.

About JSON to TypeScript

When you call a new API endpoint you get back a JSON object and a question: what shape is this data? Writing TypeScript interfaces by hand for every nested field is slow and error-prone, especially when an object has ten levels of nesting or arrays that mix types. This tool reads a JSON sample and generates export interface declarations that match it exactly. Nested objects become their own named interfaces. Arrays are typed as T[] when items share a type, or as union arrays when they are mixed. Fields present in the sample are required; you can mark them optional with ? after reviewing. The root type name is configurable so the output fits your domain naming conventions. Everything runs in the browser — production API payloads and auth tokens never leave your tab.

Why use JSON to TypeScript

Auto Interface Generation

Produces fully formed export interface declarations from any JSON sample. Each top-level key becomes a typed property, eliminating the tedious and error-prone process of writing interface bodies by hand for every API response your application consumes.

Nested Type Inference

Deeply nested JSON objects are automatically extracted into their own named interfaces with proper cross-references. A five-level deep API response becomes a clean set of composable interfaces rather than one monolithic any-typed blob.

Array Item Types

Arrays are inspected and typed as T[] when all items share the same shape, or as a union type when elements differ. This prevents the common mistake of typing every array as any[] and losing type safety on array elements.

Configurable Root Name

The top-level interface name defaults to Root but can be set to anything that matches your codebase conventions. Nested interfaces are named after their parent key, keeping the output readable and self-documenting.

Optional Field Detection

Keys that are absent or null in the sample are flagged as optional with the ? modifier and typed as T | null. This prevents false confidence from a single happy-path sample where all fields happened to be populated.

Local Only

The entire generation process runs client-side in the browser. You can safely paste production API responses containing PII, auth tokens, or business-sensitive data without any of it being transmitted to a server.

How to use JSON to TypeScript

  1. Paste a representative JSON sample — the most complete response you have — into the input editor
  2. Set the root interface name to match your domain model (e.g. User, ApiResponse, OrderDetail)
  3. Click Generate to produce TypeScript interface declarations
  4. Review optional and union types flagged in the output for accuracy against the real API contract
  5. Copy the generated interfaces into your types.ts or a dedicated file in your project
  6. Add stricter constraints by hand — narrow unions, add literal types, and layer Zod schemas where runtime validation is needed

When to use JSON to TypeScript

  • You have integrated a new third-party API and need typed interfaces before you can write any consuming code
  • You are refactoring a JavaScript codebase to TypeScript and need to type existing API responses quickly
  • An API contract changed and you want to generate fresh interfaces to diff against your committed types
  • You are writing a mock server and need the response types to match the client's expectations exactly
  • You received a large JSON fixture from a colleague and need to understand its shape without reading every key
  • You want a starting scaffold for Zod or io-ts schemas before adding validation refinements manually

Examples

Simple flat object

Input: {"id":1,"name":"Alice","active":true}

Output: export interface User { id: number; name: string; active: boolean; }

Nested object with child interface

Input: {"id":1,"profile":{"email":"a@x.com","age":30}}

Output: export interface Profile { email: string; age: number; } export interface User { id: number; profile: Profile; }

Array of typed items

Input: {"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}

Output: export interface User { id: number; name: string; } export interface Root { users: User[]; }

Tips

  • Run the generator on the longest, most complete sample you have — a minimal happy-path response hides optional fields and union types.
  • Treat generated interfaces as a scaffold: narrow union types, add string literal types, and remove overly broad any entries before committing.
  • For production type-safety, layer a Zod schema on top of the generated interfaces so invalid API responses are caught at runtime, not just at compile time.
  • Re-run after API changes and diff the output against your committed types to spot breaking contract changes before they reach production.
  • Field names with hyphens like x-request-id become quoted properties in TypeScript — consider a transform layer to convert them to camelCase in your application boundary.

Frequently Asked Questions

Should I use interface or type alias for generated output?▾
For object shapes, interface is preferred because it supports declaration merging and produces clearer error messages. type aliases are more flexible for unions and intersections. The generator outputs interface by default; change to type if your project's style guide requires it.
How are mixed-type arrays handled?▾
When an array contains elements of different primitive types, the generator emits a union type such as (string | number)[]. When elements are objects with different shapes, it emits an intersection or a named union interface depending on the overlap.
Why are some fields marked optional?▾
A field is marked optional when it is null or absent in the provided sample. Since you may only have one example response, the generator conservatively assumes any null field might be missing in other responses.
Can I generate Zod or Yup schemas instead?▾
This tool generates TypeScript interfaces. For Zod schemas from JSON, UtilityKit has a dedicated json-to-zod-schema tool that produces z.object() definitions with z.infer-compatible types.
How does it handle null and undefined values?▾
null values produce T | null types. undefined values in JSON are not valid (JSON has no undefined), so they appear only when a key is absent, in which case the field is marked optional.
What if a field can be a number or a string?▾
The generator emits a union type number | string for that field. This is the most accurate representation of what the sample shows. You should narrow it further if you know the API contract guarantees one type.
Does it generate JSDoc comments?▾
Not automatically, but the output is plain TypeScript that you can annotate. Adding /** */ JSDoc comments above each interface and property is a good practice when the types will be shared across a team.
How do I keep generated types in sync with API changes?▾
Re-run the generator whenever the API contract changes and diff the output against your committed types file. For continuous sync, consider tools like openapi-typescript if the API provides an OpenAPI spec.

Explore the category

JSON to CSharp Class Convert JSON payload samples into C# class models with inferred nested types. JSON to Zod Schema Generate Zod schema code from JSON input data. JSON to Rust Struct Generate Rust structs from JSON with serde rename hints. Schema JSON-LD Generator Generate JSON-LD for common schema types using guided forms. JSON to Go Struct Convert JSON into Go struct definitions with json tags. GitHub Actions Workflow Generator Generate starter CI/deploy workflow YAML for common project types.
From JSON to TypeScript Types: How Type Inference Tools Work Generating TypeScript interfaces from a JSON sample looks like magic, but it's a careful walk through structural inference. We explain the r Mar 2026 · 9 min JavaScript vs TypeScript: When to Add Types and When Not To TypeScript is now the default for serious JS projects, but it's not free. We weigh the cost of static typing, the value at scale, and pragma Mar 2026 · 8 min JSON Schema Explained: Validate Your APIs Like a Pro JSON Schema gives you contract-driven validation for any JSON payload. We walk through the spec, the keywords that matter, and how it powers Mar 2026 · 9 min

Glossary

Interface
A TypeScript construct that describes the shape of an object by listing its property names and types. Interfaces support declaration merging and are the idiomatic way to type API response objects.
Type alias
A TypeScript keyword (type) that names any type expression, including unions, intersections, primitives, and tuples. More flexible than interface but does not support declaration merging.
Union type
A TypeScript type formed with | that allows a value to be one of several types. For example, string | number means the value can be either a string or a number.
Optional property
A property marked with ? in a TypeScript interface, meaning the key may be absent from an object. Accessing it without a null check produces a TypeScript error when strict mode is enabled.
Generic
A TypeScript feature that lets you write type-safe code that works with multiple types. Array<T> is a generic type where T is a placeholder filled in at usage time.
Type inference
TypeScript's ability to automatically determine the type of a value from its usage without an explicit annotation. The JSON-to-TypeScript generator uses inference logic to deduce field types from sample values.