CleanorTools
Developer

JSON to TypeScript

Details

How to use JSON to TypeScript

What the tool does, how to run it, and what to expect from the result.

How to generate TypeScript interfaces from JSON

Typing an API response by hand is tedious and error prone, and most of it is mechanical: an object becomes an interface, a nested object becomes another interface, an array of objects becomes an array of one. The parts that are not mechanical are exactly the parts a sample cannot tell you, such as which fields are nullable.

Paste a real response and get the interfaces immediately. Then widen the types the sample could not see. Everything runs in your browser, so a production payload with customer data stays on your machine.

  • Paste your JSON. An array of several records gives much better results than a single object.
  • Name the root interface.
  • Read the generated interfaces, including the nested ones inferred from nested objects.
  • Check for question marks (optional fields, detected across array elements) and any unknown[] (an array your sample left empty).
  • Copy the TypeScript, then widen any field that your sample happened not to show as null.
Tips

Getting a better result out of JSON to TypeScript

Specific settings and thresholds, not general advice.

  • The types are inferred from one sample, and a sample is not a schema. If your example response happens to have a non-null avatar_url, you get avatar_url: string, and production will hand you a null. Treat the output as a first draft that you then widen by hand.
  • Optional fields are detected across an array: if the tool sees ten objects in an array and only seven have a nickname, it emits nickname?: string. A single object cannot show optionality at all, so paste an array of several real examples rather than one prettified one.
  • An empty array becomes unknown[], because there is nothing to infer from. That is the honest answer and it is also a signal: your sample does not exercise that field, so you do not actually know what goes in it.
  • A JSON null gives you the type null, not string | null. If a field is nullable, the tool can only see that from a sample that contains both a null and a value for it, so include one.
  • Interface names are derived from the key, singularized for arrays (so a users array yields a User interface), and collisions get a numeric suffix. Rename them afterwards: generated names describe your sample's key spelling, not your domain.
Limits

What JSON to TypeScript does not do

The honest boundary, so you do not lose time finding it yourself.

  • Inference from a sample only. It cannot read a JSON Schema, an OpenAPI spec, or a TypeScript type.
  • It emits interfaces and a type alias for an array root. No enums, no unions of literal types, no branded types.
  • Dates stay as string, since JSON has no date type.
  • Numbers all become number, so it cannot tell an integer from a float or a large ID from a small one.
Reference

Terms used on this page

Short, plain-language definitions for the formats and settings above.

Files & formatsJSONJSON (JavaScript Object Notation) is a lightweight, text-based format for storing and exchanging structured data as key/value pairs and ordered lists. It is human-readable, language-independent, and the default format for most web APIs and config files.General
At a glance

Who JSON to TypeScript is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Developers generating types from JSON.

Ideal for

Using the json to typescript without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

How are optional fields detected?

By comparing the objects inside an array. If a key is present in some elements and absent in others, it is emitted with a question mark. A single standalone object gives the tool no way to see optionality, so every key comes out required. Paste an array of several real records to get useful results.

Why is a nullable field typed as null rather than string | null?

Because that is all the sample showed. If the only value the tool saw for that key was null, the only type it can honestly infer is null. Include a sample where the field has a real value alongside one where it is null, and you will get the union you expect.

Can I trust the generated types in production?

Not without reading them. They describe the sample you pasted, not the API's contract. Fields your sample happened not to exercise are missing, nullable fields that were non-null in your sample come out non-nullable, and every date is a string. The output is a fast starting point that saves you the typing, not a validated schema.

What happens with dates and large IDs?

Dates come out as string, because JSON has no date type and "2026-07-13T09:00:00Z" is a string as far as the parser is concerned. Numbers all come out as number, and a 64-bit ID has already lost precision during JSON.parse if it exceeds 2^53, so the type is the least of your problems there. Have the API send large IDs as strings.

Where do the interface names come from?

From the keys. A nested object under a key called profile becomes a Profile interface, and an array called users yields a User (the name is singularized). Collisions get a numeric suffix, such as User2. Rename them to match your domain, because the generated names reflect your sample's JSON spelling and nothing more.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

BG
UtilityDeveloper

Barcode Generator

Developer

Generate a scannable Code 128 barcode as inline SVG from any text or number. Free, in your browser, nothing is uploaded.

CTI
UtilityDeveloper

Code to Image Converter

Developer

Turn a code snippet into a polished PNG screenshot with window chrome and a gradient background. Free, in your browser, nothing is uploaded.

JE
UtilityDeveloper

JSON Editor

Developer

Paste and edit JSON with live validation, pretty-print, and minify. Free, in your browser, nothing is uploaded.

JTV
UtilityDeveloper

JSON Tree Viewer

Developer

View and explore JSON as a collapsible, color-coded tree with one-click formatting. Free, in your browser, nothing is uploaded.

CEB
UtilityDeveloper

Cron Expression Builder

Developer

Build a cron expression from fields and presets, or paste one to read a plain-English explanation. Free, in your browser, nothing is uploaded.

GBG
UtilityDeveloper

GitHub Badge Generator

Developer

Create shields.io-style status badges with custom label, message, and colors. Free, in your browser, nothing is uploaded.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing