JSON to TypeScript Converter

Generate TypeScript interfaces from JSON online - paste a sample and get typed interfaces instantly.

input.json
types.ts

About JSON to TypeScript

Turn a JSON sample - an API response, a config file - into TypeScript interfaces, so you don't have to write the types by hand.

🛠️
How to use it
  1. Paste a JSON sample into the left editor, or upload a .json file.
  2. Click Generate TypeScript.
  3. The interfaces appear on the right - copy them or download them as types.ts.
  4. Rename Root to something meaningful, such as User or ApiResponse.
💡
Tips & use cases
  • Use a sample with several array items. Keys that appear in only some items become optional, so a richer sample gives more accurate types.
  • The types describe the sample, not the API's contract. Check fields that were null or empty in your sample, because their real type can't be inferred.

Generate TypeScript Interfaces from JSON

Paste JSON and get matching TypeScript: each object becomes an exported interface, nested objects get their own interface named after their key, and arrays are typed from their items.

🔄

JSON to TypeScript example

JSON input
{
  "title": "web-app",
  "version": "1.4.0",
  "private": true,
  "replicas": 3,
  "ports": [
    80,
    443
  ],
  "owner": null,
  "database": {
    "host": "db.example.com",
    "port": 5432,
    "pool": {
      "min": 2,
      "max": 10
    }
  },
  "servers": [
    {
      "name": "alpha",
      "ip": "10.0.0.1"
    },
    {
      "name": "beta",
      "ip": "10.0.0.2",
      "role": "backup"
    }
  ]
}
TypeScript output
export interface Root {
  title: string;
  version: string;
  private: boolean;
  replicas: number;
  ports: number[];
  owner: null;
  database: Database;
  servers: Server[];
}

export interface Database {
  host: string;
  port: number;
  pool: Pool;
}

export interface Pool {
  min: number;
  max: number;
}

export interface Server {
  name: string;
  ip: string;
  role?: string;
}
📐

How types are inferred

  • Objects: each object becomes an export interface. The top level is named Root; nested ones take the PascalCase form of their key.
  • Arrays: all objects in an array are merged into one interface, named after the singular of the key (servers gives Server).
  • Optional keys and unions: a key missing from some array items is marked with ?; a key holding different types becomes a union such as number | string.
  • null and empty arrays: null is typed as null and an empty array as unknown[], since the sample doesn't show what they hold.
📦

Common reasons to convert JSON to TypeScript

  • Typing the response of a REST or GraphQL API
  • Typing JSON configuration files loaded at runtime
  • Bootstrapping models for Angular, React or Node.js projects
  • Documenting the shape of a payload for teammates

JSON to TypeScript FAQ

Does it generate interfaces or type aliases?

Objects become export interface declarations. A type alias is used only when the top level of the JSON is an array or a single value, for example export type Root = RootItem[].

How are optional properties detected?

By comparing the objects in the same array. If a key is present in some items and missing in others, it is marked optional with ?. In the example above, role is optional because only one server has it.

What about keys that are not valid identifiers?

They are kept exactly as they are and quoted, for example "content-type": string, so the interface still matches the JSON.

Is my JSON uploaded to a server?

No. The interfaces are generated entirely in your browser.

🔗