JSON to TypeScript

Why Generate TypeScript Types from JSON?

Writing TypeScript interfaces by hand for every API response, configuration file, or database record is tedious and error-prone. A single deeply nested response can require dozens of interfaces, and keeping them in sync when the API evolves is a maintenance burden.

Generating types automatically lets you drop in a real API response and get accurate, ready-to-use interfaces in seconds. Type safety then catches bugs at compile time rather than at runtime: missing properties, wrong types, and typos all surface before your code ships.

Common use cases: API response typing lets you call fetch() and immediately have autocomplete on the result; config file typing prevents referencing a renamed property; database record typing ensures ORM results are handled correctly downstream.

How Type Inference Works

The generator walks the JSON tree recursively and maps each value to a TypeScript type:

JSON value	TypeScript type	Notes
"hello"	string	Any JSON string
42, 3.14	number	All JSON numbers (no integer/float split)
true, false	boolean	JSON booleans
null	null	Unioned with inferred type when field also has non-null values
{"key":...}	Named interface	Generates a new named interface, returns its name
[1,2,3]	number[]	Homogeneous primitive arrays use Type[]
[{...},{...}]	InterfaceName[]	Object arrays merge all element properties
[]	unknown[]	Empty arrays cannot be inferred
[1,"a"]	(number | string)[]	Mixed arrays become union element types

Nested object interfaces are named after their parent key converted to PascalCase. If the name Address is already taken, the parent key is prepended: UserAddress. Structurally identical interfaces are de-duplicated -- two interfaces with the same properties and types share one definition.

Handling Edge Cases

Null values

When a field is null, the generator marks it string | null as a conservative placeholder. If the field has a non-null value elsewhere in the same array of objects, the inferred type is unioned with null automatically.

Mixed-type arrays

An array like [1, "two", true] produces (number | string | boolean)[]. This is structurally accurate but usually signals an unusual API shape -- narrow the type manually if you know it is always homogeneous.

Deeply nested objects

The generator recurses through any depth of nesting. Each nested object gets its own named interface, so a five-level-deep structure produces five separate interface definitions rather than one unreadable inline type.

Duplicate interface names

If two different keys would produce the same interface name, the generator prefixes with the parent key. If collisions persist, a numeric suffix is appended to guarantee uniqueness.

Empty arrays

An empty array [] has no elements to infer from, so the generator uses unknown[]. Replace it with the correct element type once you know it.

interface vs type in TypeScript

Both keywords describe the shape of an object, but they have meaningful practical differences:

Use interface when:

• You want declaration merging -- multiple interface Foo declarations in scope are merged. This is how library typings augment global types.
• You are working with class hierarchies -- classes can implement interfaces and interfaces can extend other interfaces with clean syntax.
• You want clearer error messages -- the TypeScript compiler names interfaces in error output, making diagnostics easier to read.

Use type alias when:

• You need union types: type Status = "pending" | "done" | "failed"
• You need intersection types: type AdminUser = User & Admin
• You need mapped or conditional types: type Partial<T> = { [K in keyof T]?: T[K] }
• You are aliasing a primitive: type ID = string

For generated output from a JSON payload, the choice is largely stylistic. The Microsoft TypeScript team's style guide prefers interfaces for object shapes; many functional-style codebases prefer type aliases.

Working with the JSON Formatter

If you have a minified or escaped JSON string from a network tab or API log, the JSON Formatter tool will pretty-print and validate it. A readable structure makes it easier to understand what types you are generating, and you can paste the formatted output directly here.

Frequently Asked Questions

Does this handle optional fields?

Yes, and it is configurable. When a property is absent from some objects in an array, the generator marks it optional with ? automatically. Toggle "All Optional" to force every property to be optional -- useful when you want a lenient starting point and plan to tighten types incrementally.

What about enum types?

Enum types are not inferred from JSON because JSON has no concept of enums -- a string value like "pending" is indistinguishable from an arbitrary string. The generator maps all JSON strings to string. If you know certain fields are string literal unions or enums, refine them manually after generating the base interfaces.

Can I generate types from an API response?

Yes. Open your browser's network tab, find the API call, copy the response body, and paste it here. For large or minified responses, run them through the JSON Formatter first. For best coverage of optional fields, include a sample that contains all possible fields rather than a minimal one.

Is my data sent to a server?

No. All type generation runs entirely in your browser using JavaScript. No data is transmitted, stored, or logged anywhere. Your JSON stays on your machine.