JSON to TypeScript Converter
About this tool
Interface vs type in TypeScript
Choosing between interface and type in TypeScript depends on your use case and project conventions. Interfaces are the traditional choice for defining object shapes. They support declaration merging, which means you can define the same interface name in multiple places and TypeScript will combine them automatically. This makes interfaces well-suited for library authors who want consumers to augment type definitions. Interfaces also support the extends keyword for creating type hierarchies without intersections. Type aliases, on the other hand, offer greater flexibility. They can represent not only object shapes but also unions, intersections, tuples, mapped types, and conditional types. A type alias cannot be re-declared for merging, which some teams consider an advantage because it prevents accidental type pollution. In practice, many style guides recommend interfaces for public API shapes and type aliases for internal utility types, unions, and computed types.
Generating types from API responses
A common developer workflow involves generating TypeScript types directly from real API responses. The process is straightforward: make a request to your API endpoint using a tool like curl, Postman, or the browser fetch API, then copy the JSON response body. Paste it into this converter to get accurate type definitions that reflect the actual shape of your data. This approach is faster than manually writing interfaces and reduces the chance of mismatched types causing runtime errors. Once generated, you can import these types into your data fetching layer, use them with libraries like Axios or fetch wrappers, and benefit from full autocompletion and compile-time type checking throughout your codebase.
Related tools: JSON Formatter, JSON to Lua Converter
Frequently Asked Questions
How do I generate TypeScript types from JSON?
To generate TypeScript types from JSON, paste a valid JSON payload into the left input panel. The converter parses the JSON and recursively analyzes each property to infer the appropriate TypeScript type. The resulting interfaces or type aliases appear instantly in the right output panel. You can customize the root type name using the text field in the options bar, which defaults to "Root." Toggle the "Export" checkbox to prepend the export keyword to each type definition, making them ready for import in other modules. Toggle "Use type" to switch from interface declarations to type alias declarations. Nested objects automatically produce separate named interfaces, and arrays are typed using their element types. If array elements have different shapes, the tool generates union types. Click the copy button to copy the complete output to your clipboard for direct use in your TypeScript project files.
What is the difference between interface and type in TypeScript?
In TypeScript, interfaces and type aliases both define the shape of data, but they have distinct capabilities. Interfaces support declaration merging, meaning multiple interface declarations with the same name are automatically combined into a single definition. This is particularly useful in library code where consumers may need to extend types. Interfaces also support the extends keyword for building type hierarchies. Type aliases, declared with the type keyword, are more versatile: they can represent unions (string | number), intersections (TypeA & TypeB), mapped types, conditional types, and tuple types. However, type aliases cannot be merged through re-declaration. For JSON-to-TypeScript generation, both work equally well because the output consists of object shapes with named properties. The convention in many codebases is to use interfaces for object shapes and type aliases for unions, primitives, and computed types. This tool lets you toggle between both options to match your project style.
Does this handle nested JSON objects?
Yes, this converter fully supports deeply nested JSON structures. When the tool encounters a nested object, it generates a separate named interface (or type alias) for that object and references it by name in the parent type. This approach keeps each type definition flat and readable rather than producing a single deeply indented type. Array elements are analyzed to determine their type: if all elements share the same shape, a single typed array is produced; if elements have different shapes, a union type is generated. Empty arrays are typed as unknown[] since there is no element data to infer from. Null values are represented as null in the generated types. The converter handles real-world JSON payloads from REST APIs, GraphQL responses, and configuration files without any depth limit. All processing happens client-side in your browser, so you can safely paste responses containing proprietary data or authentication tokens.