JSON to TypeScript Converter
Paste JSON to generate TypeScript interfaces instantly. 100% client-side.
How to Convert JSON to TypeScript
- Paste your JSON into the input area on the left.
- Choose a mode — Interface (default), Type Alias, or Readonly.
- Copy or download the generated TypeScript using the buttons above the output.
- Paste into your project — the generated types are ready to use immediately.
What This Tool Generates
This converter parses your JSON and generates fully typed TypeScript definitions. It recursively handles nested objects, arrays, primitive values (string, number, boolean), and null values. Each nested object gets its own named interface so your types stay clean, composable, and reusable across your codebase.
Output Modes Explained
- Interface — Generates
interfacedeclarations. Best for object shapes that may be extended. Interfaces support declaration merging, which is useful when working with third-party type definitions. - Type Alias — Generates
typedeclarations using= { ... }syntax. Functionally identical to interfaces for plain objects, but supports union types and mapped types if you need them later. - Readonly — Generates interfaces with the
readonlymodifier on every property. Useful when modelling API responses that should not be mutated after receipt — TypeScript will produce a compile error if you try to assign to a readonly property.
Type Mapping Reference
- JSON string →
string - JSON number →
number - JSON boolean →
boolean - JSON null →
null - JSON array of strings →
string[] - JSON array of objects →
ChildType[](separate interface generated) - JSON nested object → named interface (PascalCase)
Why Use TypeScript Interfaces for JSON?
When you fetch data from a REST API or read a configuration file, you receive plain JavaScript objects with no type information. Without TypeScript interfaces, you are working blindly — autocomplete does not work, typos in property names go undetected, and refactoring is risky. By converting your JSON schema to TypeScript interfaces, you get full IntelliSense in VS Code, compile-time type checking, and safe refactoring across your entire codebase.
Working with API Responses
The most common workflow is to copy an example API response from your browser's Network tab, paste it into this converter, and paste the output into a types.ts file in your project. Then cast your fetch response: const user = await response.json() as User. For even stronger guarantees, pair TypeScript types with a runtime validation library like Zod, which can generate TypeScript types from schemas that are also validated at runtime.
Naming Conventions
The converter uses PascalCase for all generated type names (e.g., the root object becomes RootObject, a nested address object becomes Address). Array item types are named after the array property with "Item" appended when the element type is an object (e.g., hobbies containing objects becomes HobbiesItem[]). These names match TypeScript community conventions and are safe to use in any TypeScript project.
JSON to TypeScript vs. Other Converters
Several tools exist for generating TypeScript types from JSON, including json-to-ts npm package, quicktype, and VS Code extensions. This browser-based tool requires no installation, runs instantly, and works offline. For very large JSON schemas or advanced features like discriminated unions and generics, quicktype is a more powerful alternative. For everyday API type generation, this tool is the fastest path from JSON to TypeScript. Once you have your types, check out our JSON Formatter to clean up your input data.
Best Practices for Generated Types
Generated types are a starting point, not a finished product. Review the output and consider: (1) replacing number with more specific types like int from a utility library when you need integer-only values; (2) adding JSDoc comments to document what each field represents; (3) using string literal union types (e.g., 'active' | 'inactive') instead of plain string for enum-like fields; (4) marking optional fields with ? if the API sometimes omits them. The generated code follows TypeScript strict mode conventions and is compatible with TypeScript 4.0 and above.