JSON to TypeScript Interface

How the JSON to TypeScript Interface works

The generator parses your JSON and records the kinds of values found at every position. All objects at the same position, such as every item of an array, are merged into one interface. Nested objects get their own interface named after the property in PascalCase, and array items use the singular form, so orders produces an Order interface.

Strings map to string, numbers to number, booleans to boolean and arrays to T[]. A property that is missing from some of the merged objects is marked optional with ?, and a property that is null in any sample gets | null. Arrays with mixed item types become a union such as (string | number)[], and an empty array becomes unknown[]. Keys that are not valid identifiers, such as first-name, are written in quotes.

You can choose between interface declarations and type aliases, set the root name, and leave out the export keyword. If the top-level JSON is an array of objects, the root interface describes one item; for other arrays and plain values a type alias such as type Root = number[] is generated.

How to use the JSON to TypeScript Interface

1. Paste sample JSON into the input box, open a .json file, or select Load example.
2. Set the root type name, choose interface or type alias, and tick or untick Add export keyword.
3. Select Generate TypeScript, or press Ctrl + Enter (Cmd + Enter on a Mac).
4. Copy the declarations into your project or download them as a .ts file.

Example

This input:

{"id": 90071992547409931, "user_name": "ann", "createdAt": "2024-05-01T10:30:00Z",
 "items": [{"sku": "KB-1", "qty": 1}, {"sku": "MS-2", "qty": null, "gift": true}]}

produces, with the default options:

export interface Root {
  id: number;
  user_name: string;
  createdAt: string;
  items: Item[];
}

export interface Item {
  sku: string;
  qty: number | null;
  gift?: boolean;
}

Common use cases

• Typing the response of a REST API in an Angular, React or Vue application.
• Creating types for JSON configuration files or static data imported into a TypeScript project.
• Documenting the shape of webhook or message payloads for a Node.js service.
• Replacing any in existing code with accurate types based on real data.

Frequently asked questions