ToolLineup

JSON to TypeScript Converter

This JSON to TypeScript converter infers interfaces from a sample payload. Each object becomes an exported interface named after the key that held it, an array of objects contributes one interface for its items rather than one per element, and keys that are not valid identifiers are quoted so hyphenated fields still compile. The inference reads every record in an array, not just the first, so a field present in some but not others is marked optional with a question mark, and a field that was null somewhere is unioned with null — the types describe what the data can actually be.

How it works

Paste a representative JSON sample and the TypeScript declarations appear on the right. The types are inferred from what is actually in the sample, so the more complete your example, the better the result — one array element with an extra field is enough to have that field marked optional rather than missed.

Every object in the sample becomes an exported interface, named after the key that held it. Arrays become typed arrays, and an array of objects contributes one interface for its items rather than one per element.

A field missing from some records in an array is marked optional with a question mark, and a field that was null somewhere is unioned with null — so the types describe what the data can actually be, not just what the first record happened to contain.

Generation runs entirely in your browser — nothing you paste is uploaded.

JSON sample
Paste a representative JSON payload…
TypeScript interfaces

How to convert JSON to TypeScript

  1. Paste a representative JSON payload into the input on the left.
  2. Name the root type if you want something other than Root.
  3. Copy the generated interfaces into your project.

How the types are built

  • Each object becomes an exported interface, named after the key that held it.
  • An array of objects contributes one interface for its items, not one per element.
  • A field missing from some records is marked optional with ?.
  • A field that was null somewhere is unioned with null.
  • Keys that are not valid identifiers are quoted, so hyphenated keys still compile.

Give it a representative sample

The types are inferred from the data you paste, so the quality of the output depends on how complete your example is. Two things are worth including: an array with more than one element, so fields that appear in some records but not others get marked optional rather than assumed mandatory; and real values rather than placeholders, so numbers are recognised as numbers and whole numbers are told apart from decimals.

What inference cannot tell you

A sample shows what the data was, not what it can be. A field that happened to be null in every record you pasted has no discoverable type, and an enum looks exactly like a string. Treat the generated types as a first draft that saves the typing, then tighten the parts you know more about than the sample does.

Frequently asked questions

How do I generate TypeScript types from JSON?

Paste a representative payload into the left panel and the interfaces appear on the right. Name the root type if you want something other than Root, then copy the result into your project.

How are optional fields detected?

Every element of an array is examined, not just the first. A field present in some records but missing from others is marked optional with a question mark, so the type reflects what the API can actually return.

What happens to nested objects?

Each one becomes its own exported interface, named after the key that held it, and referenced from its parent — which keeps the output readable rather than deeply inlined.

What about keys that are not valid identifiers?

Keys with hyphens, spaces or leading digits are emitted as quoted property names, which TypeScript allows, so the interface compiles without you having to rename anything.

Can it tell a string union or enum from a plain string?

No. A sample shows what the data was, not what it can be, so a field holding "active" looks identical to any other string. Tighten those by hand once the boilerplate is generated.

Is my JSON uploaded?

No. Inference and generation run entirely in your browser.

Related tools