JSON to TypeScript

How it works

To use API data with types in TypeScript you need an interface for the response, and writing it by hand takes long and makes it easy to miss a field. Paste a sample response into the left pane and type a root type name (for example Customer); the declarations appear on the right. Every nested object gets its own interface: the address field becomes an Address type, and an array of objects is named with the singular (Order[] for "orders"). If the JSON starts with an array, the root type describes one element, and a RootList = Root[] line is added. All entries of an array are merged into one type: a field missing from some entry is marked with ? (email?: string), and a field that was null somewhere gets | null (last_order: string | null). A field that shows different types becomes a union (string | number). Property names are exactly the JSON keys, because a TypeScript type cannot rename data: full_name stays full_name, and a name that is not a valid identifier, like "full-name", is written in quotes. An empty array has no known element type and is written as unknown[]; add a filled entry to your sample to make it precise.

This tool is also known as json to typescript, json to ts interface, json to typescript interface, json to typescript type, generate typescript types from json.

What is TypeScript interface?

An interface in TypeScript describes which fields an object has and what types they are: interface Address { city: string; zip_code: string; }. The compiler uses it to catch misspelled field names, missing fields and type mismatches before the code runs. The declaration is erased at compile time and does not exist in the JavaScript output, so it never validates data at runtime; it only warns the developer.

What is Optional vs nullable field?

An optional field (email?: string) may be absent from the object; reading it gives undefined. A nullable field (last_order: string | null) is always there, but its value may be null. They look different in JSON: in one case the key is missing, in the other "last_order": null is written. This tool marks them separately because code has to handle them with different checks.

What is the difference between interface and type in TypeScript?

For describing object shapes, interface and type mostly give the same result. An interface is extended with extends, and a second declaration with the same name merges with the first, which is handy for adding fields to a library's types. A type can express unions (string | number), intersections and aliases, but cannot be declared twice under one name. Both work well for API responses; choose whichever your team's code style already uses.

Missing fields, null and unions: how the type is inferred

The tool infers from a single sample; the more variation the sample shows, the more accurate the type. Entries of an array are merged, and two separate questions are asked for each field: is it present in every entry, and was it ever null? If the first answer is no, the field is optional (?); if the second is yes, | null is added. They mean different things: email?: string says the field may not arrive at all, while last_order: string | null says it always arrives but can be empty.

If a field shows different types, a union is written: a field that is 5 in one entry and "5" in another becomes string | number. That usually signals an inconsistency in the API; check the API documentation before narrowing the type. A field that is only ever null has no known type and is written as null.

• [{"a":1},{"b":2}] → a?: number; b?: number;
• {"x": null} and {"x": "y"} → x: string | null
• {"n": 5} and {"n": "5"} → n: string | number
• {"full-name": "x"} → "full-name": string

interface or type, and honest limits

For describing object shapes, both do the same job. An interface can be extended with extends and merges with a second declaration of the same name, which helps when adding fields to a library's types. A type shares its syntax with unions (A | B), intersections and aliases; if your team writes everything with type, pick that. Either way the output starts with export and can be imported from another file.

Honest limits: date strings ("2026-09-20") do not become Date and fixed value sets ("active" | "inactive") do not become literal unions; they stay string, so narrow them by hand. Two nested objects with the same shape may be written twice under different names. A TypeScript type does not check data at runtime; to be sure an API really returns this shape, you need a validation library such as zod.

Frequently asked questions

How do I create a TypeScript interface from JSON?

Paste sample JSON into the left pane on this page and type the root type name. The right pane shows TypeScript declarations starting with export, with a separate interface for each nested object. Copy the code into a .ts file in your project and use it to type the data.

What do the fields with a question mark (?) mean?

That field is missing from some entries of the array. In TypeScript, ? says the field may not be there, so you have to check for it before using it. If you are sure the field is always present, set Missing fields to Required and no ? is added.

Why were the property names not converted to camelCase?

A TypeScript type does not change the data, it only describes its shape. If the JSON key is full_name, the property in the type must be full_name too, or the compiler would expect a field that the real data does not have. If you want different names, rename them in the code that reads the data.

Is the JSON I paste sent to a server?

No. Type inference and writing the TypeScript code happen entirely in your browser, so even a sample response with customer data never leaves this page. Once loaded, the page also works offline.