JavaScript/JSON to TypeScript Types

How the conversion works

Each object becomes an interface, and every nested object gets its own named interface that the parent refers to. Arrays become typed arrays such as string[] or Order[], and the interface for the items is named in the singular.

When the items of an array have different fields, the fields that some items lack are marked optional with ?. Values that are null are typed as null, because there is nothing to infer from. Once you know the real type, change those to something like string | null.

Example

The second order has no total, so total becomes optional in the generated Order interface:

const User = {
  id: 1,
  name: "Ann",
  orders: [{ id: 1, total: 9.5 }, { id: 2 }],
};

// becomes

interface User {
  id: number;
  name: string;
  orders: Order[];
}

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

JSON or JavaScript input

You can paste strict JSON or a JavaScript object literal with unquoted keys, single quotes, and trailing commas. Start with const User = to name the root interface User; without a name, the root interface is called Object, so it is worth adding one.

The input is evaluated as JavaScript in your browser to read the object, so paste data, not code you do not trust.

When it helps

• Typing the response of a fetch or axios call instead of using any.
• Writing types for a config file, fixture, or mock data.
• Documenting the shape of a third-party webhook payload.