ToolHarbor

JSON to TypeScript

Convert JSON data to TypeScript interfaces or type aliases. Infer types from any JSON structure instantly.

Features

  • Generate TypeScript interfaces or type aliases from JSON
  • Infer nested object types with proper naming
  • Handle arrays of objects with merged shapes
  • Choose between interface and type output style
  • Customize the root type name
  • Works entirely offline — your data never leaves your browser

How to Use

  1. 1Paste your JSON data into the input field on the left
  2. 2Choose between "Interface" or "Type" output style
  3. 3Optionally set a custom root type name
  4. 4Click "Generate Types" to convert
  5. 5Copy the TypeScript output from the right panel

Examples

Simple object

Input

{
  "name": "John",
  "age": 30,
  "active": true
}

Output

export interface Root {
  name: string;
  age: number;
  active: boolean;
}
Nested objects with arrays

Input

{
  "id": 1,
  "name": "Project Alpha",
  "tags": ["typescript", "react"],
  "owner": {
    "name": "Jane",
    "email": "jane@example.com"
  }
}

Output

export interface Owner {
  name: string;
  email: string;
}

export interface Root {
  id: number;
  name: string;
  tags: string[];
  owner: Owner;
}
Array of objects

Input

[
  { "id": 1, "title": "Post One", "published": true },
  { "id": 2, "title": "Post Two", "published": false }
]

Output

export interface RootItem {
  id: number;
  title: string;
  published: boolean;
}

export type Root = RootItem[];

Why Convert JSON to TypeScript?

When working with APIs, configuration files, or any external data source in a TypeScript project, you need type definitions to get the full benefits of static typing. Manually writing interfaces for complex JSON structures is tedious and error-prone. This tool automates that process by analyzing your JSON data and generating accurate TypeScript types.

The converter infers the correct TypeScript type for each value: strings, numbers, booleans, nulls, arrays, and nested objects. For nested objects, it generates separate named interfaces (or type aliases) with PascalCase names derived from the property keys. This produces clean, idiomatic TypeScript that follows community conventions.

Arrays of objects receive special treatment. The tool examines all items in the array, merges their shapes, and generates a single interface that covers all possible properties. Keys that appear in some items but not others are marked as optional with the ? modifier. This accurately models real-world API responses where array items may have varying shapes.

You can choose between two output styles: interfaces and type aliases. Interfaces are the traditional TypeScript approach and support declaration merging. Type aliases are more flexible and can represent unions, intersections, and mapped types. For most API response types, either style works — pick whichever matches your project conventions.

Everything runs in your browser. Your JSON data — API responses, database records, or configuration objects — is never sent to any server. Paste the response from your API, click generate, and copy the types directly into your codebase.

Frequently Asked Questions

Related Tools