JSON to TypeScript Converter

Paste JSON to generate TypeScript interfaces instantly. 100% client-side.

JSON Input
TypeScript Output
Paste JSON above to generate TypeScript interfaces.

How to Convert JSON to TypeScript

  1. Paste your JSON into the input area on the left.
  2. Choose a mode — Interface (default), Type Alias, or Readonly.
  3. Copy or download the generated TypeScript using the buttons above the output.
  4. 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 interface declarations. 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 type declarations 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 readonly modifier 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.

Frequently Asked Questions

A TypeScript interface is a structural contract that defines the shape of an object. It specifies which properties an object must have and their types. Interfaces are erased at compile time and have no runtime representation, making them purely a type-checking mechanism.
Interfaces can be extended and merged (declaration merging), while type aliases support union types, intersection types, and mapped types. For representing JSON object shapes, both work equally well. The community convention is to use interfaces for object shapes and type aliases for unions or computed types.
No. This converter runs entirely in your browser using JavaScript. Your JSON never leaves your machine. There is no server processing, no logging, and no data collection of any kind.
JSON null values are mapped to the TypeScript type 'null'. If you want to allow null on a property, the generated type will show 'string | null' or similar union types. The Readonly mode wraps all properties with the readonly modifier to prevent mutation.
Yes. The converter recursively processes nested JSON objects and generates separate interfaces for each nested type. For example, if your JSON has an 'address' object inside a 'user' object, you will get both an Address interface and a User interface with the address property typed as Address.