devtools.codes

JSON to TypeScript

RUNS LOCALLY

Generate TypeScript interfaces from a sample JSON response. Nested objects become their own named interfaces, arrays are typed from their elements, and every place the sample was not conclusive is reported rather than guessed over. The output is a first draft to correct, not a specification.

Your tool input is processed locally in your browser and is not intentionally uploaded to our servers. Advertising and analytics providers may still process normal page, device, cookie and network information.

How to use the JSON to TypeScript

  1. Paste a real response. The fuller the sample, the less the generator has to infer.
  2. Name the root interface. Nested interfaces are named after the keys that contain them.
  3. Read the advisories. Each names a path where the sample could not settle the type.
  4. Correct the guesses by hand, particularly nullable fields and arrays that were empty.

A worked example, and what it shows

The example is an API response with a nested object, an array of records, a field that is null in this sample, and an array that happens to be empty. It is chosen because the last two are the cases a generator cannot resolve on its own.

Three interfaces are produced, with the root first. The null field is typed as null and the empty array as unknown[], each with an advisory naming the path and explaining that a fuller sample or a manual widening is needed.

Press Example in the workspace above to load it.

Common questions about the JSON to TypeScript

Why is my field typed as null?

Because it was null in the sample, and one example cannot distinguish a field that is always null from one that merely happened to be empty this time. The advisory names the path. If the field holds a value in other responses, widen it by hand to something like string | null.

Why is my array typed unknown[]?

Because it was empty in the sample, so there is no element to infer a type from. Guessing would produce a type that compiles and is wrong, which is worse than an explicit unknown. Provide a sample containing at least one element, or replace unknown yourself.

Can I trust the generated types?

Treat them as a first draft. They accurately describe the sample you provided, which is not the same as describing every response the endpoint can return. Optional fields, nullable values and union types are all invisible in a single example. Correct them against the API documentation where one exists.

How are nested interfaces named?

After the key that contains them, converted to PascalCase, with plural keys singularised so a users array yields a User interface. Where two different shapes would collide on a name, a number is appended rather than one silently overwriting the other.

Does my input leave the browser?

No. Your tool input is processed locally in your browser and is not intentionally uploaded to our servers. Advertising and analytics providers may still process normal page, device, cookie and network information. That distinction matters here, because a JSON document pasted into a formatter is very often a real API response containing real customer records.