Paste a JSON sample in the input box, click Generate, then copy the TypeScript interfaces from the output box. Nothing leaves your browser.
JSON to TypeScript Interface Generator
FreetoolOnline Editorial TeamConvert a JSON input into a TYPESCRIPT output - one step, in the browser.
Typical use: when your downstream platform accepts TYPESCRIPT but not JSON.
How the generator types each JSON value
The JSON to TypeScript Interface Generator walks the pasted value field by field and picks a type for each one, instead of typing the whole object as any. A string becomes string, a number becomes number, and a boolean becomes boolean. A nested object gets its own export interface, named after the property that held it - an address field inside the root object produces a separate RootAddress interface. If two different nested objects would end up generating the same name, the generator appends a number so the second one becomes RootAddress2 instead of silently overwriting the first.
| JSON value | Generated TypeScript |
|---|---|
| Nested object | Its own export interface, named after the property |
Empty array [] | unknown[] |
| Array mixing types | Union, e.g. (string | number)[] |
null | Optional field, unknown | null |
Arrays are typed by scanning every item rather than guessing from the first one: an empty array becomes unknown[], an array where every item is the same type becomes that type followed by [], and an array mixing types becomes a union such as (string | number)[]. A property key that is not a valid TypeScript identifier - one containing a space or hyphen, or starting with a digit - is quoted with JSON.stringify() in the output, for example "first-name": string;, so the generated interface still compiles even when the source JSON key could not be written as a plain property name.
One output every plain object shares: export type Root = Root;
Paste any JSON object as the top-level input - the most common case, since most API responses start with a { - and the generator's root interface is always named Root, because the tool starts from that literal name with no field to change it. That produces an export interface Root { ... } block, and the output always closes with export type Root = Root;, a type alias sharing the exact same name as the interface above it. TypeScript treats an interface and a type alias as the same kind of identifier, so pasting that output straight into a .ts file raises a duplicate identifier error on the last line. The fix takes one edit: rename either the interface or the type alias before you paste it in - changing the last line to export type RootType = Root; keeps every generated interface working with a single find-and-replace. This only affects a JSON object at the top level; a JSON array such as [{"id":1}] produces export type Root = RootItem[]; instead, with no name clash, because the array's item interface is named RootItem, not Root.
Frequently Asked Questions
What does JSON to TypeScript Interface Generator do?
Convert a JSON input into a TYPESCRIPT output - one step, in the browser.
When should I reach for json to typescript interface generator?
Typical use: when your downstream platform accepts TYPESCRIPT but not JSON.
What complementary tools work well alongside json to typescript interface generator?
If you need the reverse direction, look at the related-tools section for the TYPESCRIPT-to-JSON converter.
How does it name the interface for a nested object?
After the property that holds it. An address field inside the root object gets its own export interface named RootAddress. If two different nested objects would generate the same name, the generator appends a number - RootAddress2, RootAddress3 - so neither overwrites the other.
What TypeScript type does a null value get?
unknown | null, and the field is marked optional. A null value carries no information about what type it should be, so the generator marks it optional and types it unknown | null instead of guessing a concrete type.
What happens when a JSON array mixes types, or is empty?
An empty array becomes unknown[]. An array where every item is the same type becomes that type followed by [], such as string[]. An array mixing types becomes a union, such as (string | number)[].
What happens to a JSON key that is not a valid TypeScript identifier?
It gets quoted. A key containing a space or hyphen, or one that starts with a digit, is wrapped in quotes in the generated interface - for example "first-name": string; - so the output still compiles even though that key could not be written as a plain property name.
Can I rename the root type the generator produces?
Not from the page - the root interface and the root type alias are both always named Root, with no field to change it. That is also why a top-level JSON object needs a one-line rename before its output compiles; see the note above about export type Root = Root;.