JSON to TypeScript Converter

Why I Built This JSON to TypeScript Converter

I got tired of manually writing TypeScript interfaces for API responses. Every time I integrated a new API, I'd copy the JSON response and spend 10 minutes converting it to TypeScript types by hand. So I built this tool to do it in seconds.

Features I Actually Use

Instant Type Generation - Paste JSON, get TypeScript types immediately
Interface vs Type - I prefer interfaces for most cases, but sometimes need type aliases for unions
Export by Default - Types are exported so I can import them directly into my codebase
Nested Object Handling - Creates separate interfaces for nested objects, keeping everything clean
Array Type Inference - Figures out the element type automatically, even for complex arrays
Optional Properties - When dealing with APIs that return inconsistent data

How Type Inference Works

The converter analyzes your JSON structure and infers the appropriate TypeScript types:

Strings - JSON strings become string
Numbers - Both integers and floats become number
Booleans - true and false become boolean
Null - Becomes null type
Arrays - Element types are inferred from contents
Objects - Create new interfaces with inferred property types
Empty Arrays - Become unknown[] (configurable to any[])

My Daily Workflow

When working with a new API, I grab the response from DevTools, paste it here, and copy the generated types into my project. It handles most of the heavy lifting - I usually just need to rename a few interfaces to match my naming conventions.

For APIs with optional fields, I enable "Optional properties" to add ? to every property. Then I review which ones are actually required and remove the question marks manually. It's faster than adding them one by one.

I often use this alongside the JSON Formatter to clean up messy API responses first, then convert them to TypeScript. The YAML to JSON Converter is handy when I'm working with OpenAPI specs.

Interface vs Type - When to Use Which

I default to interfaces because they're more flexible for extension. If I need to add properties later, I can extend the interface or use declaration merging. Types work better when I need unions or intersections.

For API response types, interfaces make sense. For utility types or when combining multiple types, I switch to type aliases. The converter supports both - just toggle the option.

Handling Complex JSON Structures

The converter handles deeply nested objects by creating separate interfaces for each level. This keeps the generated code readable and allows you to reuse nested types elsewhere.

For arrays of objects, it merges all object properties to create a complete type. If some objects have extra fields, those become optional in the final type. This works well for APIs that return slightly different object shapes in the same array.

Frequently Asked Questions

What is the difference between interface and type in TypeScript?

Interfaces are extendable and can be merged through declaration merging, making them ideal for object shapes that might be extended later. Types (type aliases) are more flexible - they can represent unions, intersections, and primitives. For simple object types, both work similarly, but I prefer interfaces for most API response types.

Should I use unknown or any for dynamic types?

Use unknown when you want type safety - it requires type checking before use. Use any to opt out of type checking entirely. I recommend unknownfor most cases as it catches potential bugs at compile time.

How does the converter handle nested objects?

By default, nested objects are converted to separate named interfaces. This keeps your types organized and allows reuse. You can enable "Inline nested objects" to embed them directly within the parent type if you prefer a more compact output.

What happens with arrays of mixed types?

When an array contains elements of different types, the converter creates a union type. For example, an array with strings and numbers becomes (string | number)[]. Arrays of objects are merged to include all possible properties.

Is my JSON data secure?

Yes, everything runs locally in your browser. Your JSON data is never sent to any server. I built it this way because I paste production API responses here myself.