JSON to TypeScript interfaces.

Paste an API response and get types you can drop into your code. Nested objects, arrays and nulls are worked out from the data.

Free
No signup
Runs in your browser

JSON

Root type name

Declare with

TypeScript

export interface Organization {
  id: string;
  name: string;
  plan: string;
  trialEndsAt: null;
  owner: Owner;
  members: Member[];
  limits: Limits;
}

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

export interface Member {
  id: string;
  role: string;
  lastSeenAt: string | null;
  invitedBy?: string;
}

export interface Limits {
  seats: number;
  projects: number;
}

Keys missing from some array items come out optional. Fields that are sometimes null become T | null. A field that is only ever null in your sample stays null, so give it a real value if you know the type.

How it works.

1
Paste a JSON sample, like an API response. The more varied the sample, the better the types.
2
Name the root type and pick interface or type. Nested objects get their own named declarations.
3
Copy the types or download them as a .ts file.

How the types are worked out

Every value seen at the same place is merged. If one member in an array has invitedBy and another doesn't, invitedBy becomes optional. If lastSeenAt is a string in one item and null in another, it becomes string | null. Objects with the same shape share one declaration.

Nested objects are named after their key, and list items after the singular of the list: members gives Member, categories gives Category.

Types from one sample are a guess

The output can only describe the data you pasted. A field that is null in every item comes out as null, and an empty array as unknown[]. Fix those by hand, or paste a sample that has real values in them.

For data that crosses your own API, types copied from a sample drift the moment the backend changes. Sharing the type from the server is the fix that lasts.

Questions, answered.

How do I convert JSON to a TypeScript interface?

Paste the JSON into the box above and the interfaces appear on the right. Set the root name, choose interface or type, and copy the result into your project.

Should I use interface or type?

For object shapes either works. Interfaces can be extended and merged, and their error messages read a little better. Type aliases can also describe unions and primitives. Use whichever your codebase already uses.

How are optional fields detected?

From arrays. When objects in the same array don't all have the same keys, the keys missing from some of them get a ?. A single object has no optional fields, since every key in it is present.

What happens with null values?

A field that is null in some samples and has a value in others becomes that type | null. A field that is always null stays null, because the data doesn't say what else it could hold.

Do the types check data at runtime?

No. TypeScript types are removed when your code compiles, so they can't check what an API actually returns. They describe the shape for your editor and the compiler, nothing more.

More free tools.

All tools

Or skip the copy-paste types.

In Hype Stack the API's types reach the web, admin, mobile and desktop apps on their own, typed end to end from database to button. Free and open source.

See how Hype Stack works