JSON to TypeScript Interface Converter

Why Convert JSON to TypeScript Interfaces?

When you integrate an external API, the first thing you need is type definitions for the response data. Manually writing TypeScript interfaces from API documentation or sample responses is tedious and error-prone. You need to inspect every field, determine its type, handle optional values, and account for nested structures. This converter does all of that instantly.

TypeScript interfaces catch bugs at compile time that would otherwise surface as runtime errors. A mistyped property name, a number treated as a string, or a missing null check are all caught by the type checker if your interfaces are accurate. Starting from real JSON data ensures your interfaces match the actual API contract, not an outdated spec.

How the Converter Works

The converter recursively walks your JSON structure and infers TypeScript types from JavaScript runtime types:

• Strings map to string
• Numbers (integer and float) map to number
• Booleans map to boolean
• null maps to any (since the actual type cannot be inferred from null alone)
• Arrays are typed based on the first element. An array of objects generates a separate interface for the item type.
• Nested objects produce their own named interfaces. The property name (capitalized) becomes the interface name.

For example, a JSON object with a nested "address" object generates both a Root interface and an Address interface, with the Root referencing Address by name.

Example

Input JSON

{
  "id": 1,
  "name": "John Doe",
  "email": "john@example.com",
  "active": true,
  "roles": ["admin", "editor"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "zip": "10001"
  }
}

Output TypeScript

interface Address {
  street: string;
  city: string;
  zip: string;
}

interface Root {
  id: number;
  name: string;
  email: string;
  active: boolean;
  roles: string[];
  address: Address;
}

Best Practices for TypeScript Interfaces

• Use interfaces for API responses: Define interfaces for every external data source. This creates a clear contract between your code and the API.
• Add optional markers: After generating, review the output and add ? to properties that may not always be present in the response.
• Name interfaces meaningfully: Rename the generated Root interface to something descriptive like UserProfile or OrderResponse.
• Handle null values: If a property can be null, change its type to a union: email: string | null.
• Export interfaces: Add export before each interface declaration so they can be shared across files.
• Co-locate types: Keep interfaces near the code that uses them, or in a shared types/ directory for cross-module types.

TypeScript Interface vs Type Alias

TypeScript offers two ways to define object shapes: interface and type. Interfaces are extensible (you can merge declarations and use extends), while type aliases are more flexible (they support unions, intersections, and mapped types). For API response objects, interfaces are the conventional choice because they clearly communicate "this is the shape of an object" and support declaration merging for module augmentation.

This converter generates interfaces because that is the idiomatic pattern for object shapes in TypeScript. If you need a type alias instead, simply replace interface Root with type Root = in the output.

Common Workflows

• API integration: Call the endpoint in Postman or curl, copy the JSON response, paste it here, and use the generated interface in your TypeScript code.
• Database schema mapping: Export a database row as JSON and convert it to a TypeScript interface for your ORM layer.
• Mock data typing: Generate interfaces from your mock JSON fixtures to ensure test data matches production shapes.
• Config file typing: Convert a JSON config file to an interface for type-safe configuration access.