JSON to TypeScript

Generate TypeScript interfaces from JSON.

JSON input434 chars

Root type name

Output style

Optional properties

Export keywordPrefix declarations with export

TypeScript output4 declarations

export interface Root {
  id: number;
  name: string;
  active: boolean;
  price: number;
  discount: null;
  tags: string[];
  sizes: number[];
  address: Address;
  variants: (Variant | Variant2)[];
}

export interface Address {
  city: string;
  zip: string;
  country: string;
}

export interface Variant {
  sku: string;
  color: string;
  stock: number;
}

export interface Variant2 {
  sku: string;
  color: string;
  stock: number;
}

Processed on your device. We never see your files.

How to use JSON to TypeScript

What this tool does

JSON to TypeScript reads a block of JSON and writes the matching TypeScript type declarations — the interface definitions that give a TypeScript project autocomplete, refactoring safety and compile-time checks. Paste a JSON sample, drop a .json or .txt file, or load the built-in example, and the tool infers a complete set of interfaces describing that data’s shape. You can copy the result or download it as interfaces.ts.

It saves the tedious, error-prone job of hand-typing interfaces to match an API response. Instead of squinting at a payload and transcribing every field, you paste the payload once and get a faithful starting point in seconds.

How the inference works

The generator walks your JSON and builds a type for every value:

The root object becomes an interface named Root by default — you can rename it in the Root type name field.
Each nested object becomes its own named interface, with the name derived from the key it sits under (address becomes Address, billing_info becomes BillingInfo). Identically named shapes get a numeric suffix so every interface name stays unique.
Arrays become T[]. The element type is inferred from the items; mixed-type lists become a union like (number | string)[], and empty lists become unknown[] because there is nothing to inspect.
Primitives map to string, number and boolean; an empty value maps to null.
If the root of your JSON is an array or a single value rather than an object, the tool emits a type alias for it instead of an interface.

Options you can set

Root type name — name the top-level type whatever your code expects.
Output style — choose interface declarations or type aliases.
Optional properties — leave every property required, mark only the fields that were null as optional with ?, or make every property optional. The last is useful for partial-update payloads where any field may be absent.
Export keyword — toggle whether each declaration is prefixed with export so it can be imported from other files.

How to use it

Paste your JSON, drop a file, or load the sample.
Set the root type name to match your codebase, and pick interface or type.
Choose how optional properties should be handled.
Decide whether the declarations should be exported.
Read the generated code, then Copy it or Download .ts to drop interfaces.ts straight into your project.

If the JSON is malformed, a clear error names the problem so you can fix the source and try again.

Tips and common pitfalls

Generated types reflect one sample, not every possible response. If a field can be missing, null, or hold more than one type, your single example will not show that — paste a representative payload, or generate from a few samples and merge the results. After generating, it is normal to widen a string to a union of literals, or to mark a field optional that the sample happened to include.

Watch for invalid JSON: trailing commas, single quotes and unquoted keys are common when JSON is copied out of source code rather than from a real response. Numbers in JSON have no integer-versus-float distinction, so every number becomes number — adjust by hand if you need a stricter type.

To inspect a payload before converting it, try the JSON Tree Viewer. To tidy or validate raw JSON first, use the JSON Formatter. If you need runtime validation rather than compile-time types, the JSON Schema Generator is the better fit.

Privacy

This converter runs entirely in your browser. The JSON you paste or the file you drop is parsed and turned into TypeScript by JavaScript on your own device. Nothing is uploaded, nothing is stored between visits, and nothing is logged. Close the tab and the data is gone — so generating types from real API responses here exposes nothing.

Frequently asked questions

How does the tool decide each property's type?

It looks at the actual value in your JSON sample. Text becomes string, numbers become number, true/false becomes boolean, and an empty value becomes null. A nested object becomes its own named interface, and a list becomes an array type such as string[]. The generated types are only as accurate as the sample you provide — if a field is sometimes a number and sometimes missing, paste a representative example so the result reflects reality.

What happens with arrays that mix different value types?

When every element of a list shares one shape, the tool emits a clean array type like number[] or an array of one interface. When elements differ — for example a list holding both numbers and strings — it emits a union such as (number | string)[] so the type stays correct. An empty list cannot be inspected, so it becomes unknown[]; widen or narrow that by hand once you know what the list will hold.

Should I use interface or type, and when do I mark properties optional?

Both outputs describe the same shape; interface is the common choice for object models and supports declaration merging, while a type alias is handy when you later build unions. Use the optional toggles when your JSON sample does not cover every case: 'Null becomes optional' marks fields that were null, and 'All optional' adds a ? to every property — useful when the payload is a partial update or fields are genuinely sometimes absent.

How is this different from a JSON schema generator?

A JSON schema describes data for validation at runtime and is itself written in JSON. TypeScript interfaces describe data for your editor and compiler at build time — they give you autocomplete and catch mistyped field names while you code. If you need runtime validation, use the JSON Schema Generator; if you want type safety in a TypeScript codebase, use this tool. Many teams use both, and the JSON Tree Viewer alongside them to inspect the raw payload first.

Is my JSON private when I use this tool?

Yes. The JSON you paste or the file you drop is parsed and converted into TypeScript entirely by JavaScript running in your browser. Nothing is uploaded to a server, nothing is stored between visits, and nothing is logged. Close the tab and the data is gone, so it is safe to generate types from API responses that contain real or sensitive data.

Related tools

JSON Tree Viewer

Explore JSON in a collapsible tree view.

JSON Formatter

Format, validate, and minify JSON instantly.

JSON Schema Generator

Infer a JSON Schema from a sample document.

JSON to Excel

Convert JSON data into a downloadable Excel file.

JSON to CSV

Convert JSON arrays into CSV, flattening nested data.

XML to JSON

Convert XML documents into JSON.