JSON to TypeScript

JSON to TypeScript — What It Does

Paste a JSON object and get TypeScript interface declarations instantly. The converter recursively walks the JSON structure, infers types for all fields (including nested objects, arrays, null, and primitives), and generates clean, named interfaces ready to use in your TypeScript project. Runs entirely in the browser — no data is sent anywhere.

Type Inference Rules

• String → string
• Number → number
• Boolean → boolean
• Null → null (may want to add | undefined)
• Object → new named interface (PascalCased from key name)
• Array → ItemType[] (item type inferred from first element)

Example Conversion

Input JSON:

{ "id": 1, "name": "Alice", "active": true, "address": { "city": "NY" } }

Generated TypeScript:

interface Address { city: string; }
interface Root { id: number; name: string; active: boolean; address: Address; }

After Generating — What to Refine

• Optional fields — Add ? to fields that may be absent: email?: string
• Union types — Widen null fields to string | null or string | null | undefined
• Literal types — Narrow status fields from string to 'active' | 'inactive'
• Runtime validation — Use Zod or io-ts for runtime shape checking beyond compile-time types

Frequently Asked Questions

How does JSON to TypeScript inference handle arrays?

The converter inspects the elements of a JSON array to determine the item type. If all elements are the same type (e.g., all strings), it generates string[]. If elements are objects, it creates a separate named interface for the item type and generates ItemType[]. Mixed arrays with heterogeneous types produce (string | number | boolean)[] or unknown[].

What happens with null values in JSON?

A JSON null value is typed as null in the generated interface. If a field can be either a value or null, the type becomes string | null, number | null, etc. You may want to manually change these to optional fields (field?: string) if null represents "not present" in your data model.

Can I generate types instead of interfaces?

This tool generates TypeScript interface declarations by default. Interfaces and type aliases are largely interchangeable for object shapes in TypeScript, but interfaces support declaration merging and are generally preferred for public API types. If you need type instead of interface, a simple find-and-replace in the output works fine.

How should I name my interfaces to follow TypeScript conventions?

TypeScript convention is to use PascalCase for interface names — e.g., UserProfile, ApiResponse, OrderItem. Avoid the I prefix (IUser) which is a legacy C# habit not idiomatic in TypeScript. The root interface name field in this tool controls the name of the top-level interface; nested interfaces are named from their JSON key.

Does the generated TypeScript work with JSON.parse output?

Yes. You can cast JSON.parse output to the generated interface: const data = JSON.parse(raw) as UserProfile. However, this is a compile-time-only assertion — TypeScript does not validate the runtime shape. For runtime validation, use a library like Zod or io-ts to parse and validate JSON against a schema.