JSON to TypeScript
Free web tool: JSON to TypeScript
About JSON to TypeScript
The JSON to TypeScript Interface Generator converts a JSON object or array into a set of TypeScript interface declarations, entirely in your browser. It recursively traverses the JSON structure: for each plain object it creates an export interface block with a property for every key, inferring the TypeScript type from the value — string, number, boolean, null, or a nested interface name for sub-objects. Arrays are typed as the element type followed by [], and union types are generated when an array contains mixed element types.
This tool is used daily by TypeScript developers who receive JSON from REST APIs, GraphQL responses, or configuration files and need to write type-safe interfaces without tedious manual typing. You can set a custom root interface name — the default is Root — and all nested interfaces inherit capitalized names derived from the parent key, following standard TypeScript naming conventions. The generated code is displayed with syntax highlighting and can be copied to the clipboard with one click.
The converter handles practical edge cases: keys that are not valid JavaScript identifiers are wrapped in quotes in the interface, primitive arrays with mixed types produce union types such as (string | number)[], empty arrays become unknown[], and null values map to the null type. This makes the generated interfaces accurate enough to use directly as a starting point in a TypeScript project, even for complex nested API responses.
Key Features
- Recursively converts nested JSON objects into separate named TypeScript interfaces
- Infers correct types: string, number, boolean, null, and nested interface references
- Generates union types for mixed-type arrays, e.g. (string | number)[]
- Empty arrays produce unknown[] to avoid over-constraining the type
- Non-identifier keys are automatically quoted in the interface definition
- Custom root interface name input with PascalCase capitalization for nested names
- Syntax-highlighted TypeScript output with one-click copy
- 100% client-side — JSON never leaves your browser
Frequently Asked Questions
What kind of TypeScript code does this tool generate?
The tool generates export interface declarations. For a JSON object {"name":"Alice","age":30} with root name Person, it produces: export interface Person { name: string; age: number; }. Nested objects produce additional named interfaces.
How does the tool name nested interfaces?
Nested interface names are constructed by capitalizing the parent interface name and appending the capitalized key name. For example, a field address in a Root interface produces an AddressItem or RootAddress interface. The generated names follow PascalCase convention.
What happens with arrays?
Single-type arrays like [1,2,3] produce number[]. Mixed-type arrays like [1,"a",true] produce (number | string | boolean)[]. Empty arrays produce unknown[] since the element type cannot be inferred. Arrays of objects produce a named interface for the first element and then InterfaceName[].
Does the tool handle null values?
Yes. null values in JSON map to the null TypeScript type in the interface. If you want to express that a field is nullable in practice, you can manually change null to string | null or use optional chaining after pasting the generated code.
Can I use the output directly in my TypeScript project?
Yes, for most typical API responses the generated interfaces are accurate and ready to paste. For complex cases like polymorphic arrays or deeply recursive structures you may need to adjust the generated types manually, but they serve as an excellent starting point.
What is the root interface name field for?
It sets the name of the top-level interface. If your JSON represents a User object, set the root name to User and the generated interface will be export interface User { ... }. Nested interfaces are named relative to this root.
What if a JSON key is not a valid TypeScript identifier?
Keys containing spaces, hyphens, or starting with numbers are automatically wrapped in double quotes in the interface definition (e.g. "my-key": string;), which is valid TypeScript syntax.
Is my JSON data sent to a server?
No. All conversion logic runs in your browser using pure JavaScript. No data is transmitted, logged, or stored anywhere.