JSON to TypeScript interface: use a converter, your editor or your AI agent

To get a JSON to TypeScript interface, paste a sample into a type generator such as AyeTab JSON to Code, then turn the result into a named interface and review the optional fields. You can also ask your AI coding agent, but for a mechanical job like this a deterministic tool is quicker, free and gives the same answer every time.

Interface or type alias

TypeScript gives you two ways to name an object shape:

interface Order {
  id: string;
  total: number;
}

type Order = {
  id: string;
  total: number;
};

The TypeScript handbook says the two are very similar and that you can usually pick either. The main difference: an interface can be reopened to add properties later, while a type alias cannot. Many teams use interfaces for API payloads and type aliases for unions. Pick one convention and stick to it.

AyeTab's TypeScript output is an exported type alias called Root. If your codebase prefers interfaces, the switch is two edits: change export type Root = to export interface Order and drop the = and the trailing semicolon.

Step by step with AyeTab

1. Capture a real response, for example from your browser's network tab or a curl call.
2. Open JSON to Code on app.ayetab.com and paste the JSON.
3. Keep TS selected and copy the output.
4. Rename Root, convert it to an interface if that is your convention, and pull repeated nested objects into their own interfaces.
5. Review optional and nullable fields (more on that below).

The tool runs in the browser and does not upload the input to AyeTab's servers, so a response with real user data in it stays on your machine. It is free, with no account.

Should you ask your AI agent instead

Coding agents are good at this, and if the JSON is already in your repo, asking one can be reasonable. For a payload you just copied, compare the two routes:

A large API response is many tokens of context for a task a parser does instantly. A sensible split: generate the shape with a tool, then ask the agent to name the types or write a runtime validator if you need one. quicktype also offers an MCP server for agents if you want generation inside the agent loop.

Optional and nullable fields

A generator sees one sample. If discountCode is missing from that sample, it will not appear in the interface. If shippedAt is null, the type says null when the real type is string | null.

Fix it by checking two or three responses, or the API docs, then:

interface Order {
  id: string;
  total: number;
  discountCode?: string;
  shippedAt: string | null;
}

If the API publishes a JSON Schema or an OpenAPI spec, generate from that instead, because it already knows which fields are required.

One more check: numbers. JSON has a single number type, so an ID that looks numeric in the sample will come out as number. If the API documents it as an opaque identifier, or it can exceed what JavaScript stores exactly, change it to string before other code starts doing arithmetic on it.

Doing it in your editor

If you prefer to stay in the editor, the free Paste JSON as Code extension from quicktype pastes clipboard JSON as TypeScript types. For a JSON file you import, enable resolveJsonModule and TypeScript infers the type of the import for you.

Keep the tool one shortcut away

The AyeTab Chrome extension puts JSON to Code, the JSON formatter and the rest of AyeTab's tools on your new tab page and in a side panel. Ctrl+K or Cmd+K opens the palette, and pasting a JSON blob brings up a tool suggestion. When you need serializers or many languages, quicktype goes further; for a fast interface from a sample, AyeTab is the shorter path.