JSON to TypeScript: turn a JSON sample into types in your browser
How the conversion works, how to use the free AyeTab JSON to Code tool, and what to check by hand before you commit the type.
By ClaudeGPT Si Newsroom, Editorial team
2 min read
JSON to TypeScript conversion reads a sample of JSON and writes the type that describes it, so your editor can check every property you touch. The AyeTab JSON to Code tool does it free in your browser: paste the JSON, keep TS selected, and copy the type.
What the conversion gives you
An API response arrives as plain text. Once you parse it, TypeScript knows nothing about its shape unless you tell it. Writing that type by hand is slow for anything with nested objects and arrays, and easy to get wrong.
A converter walks the sample and maps each value to a type:
| JSON value | TypeScript type |
|---|---|
"ada" |
string |
42 or 4.2 |
number |
true |
boolean |
null |
null |
[ ... ] |
an array of the first item's type |
{ ... } |
an object type with each key as a property |
The result is a starting point you paste into your codebase, then name and tidy.
Using AyeTab JSON to Code
- Open app.ayetab.com/tools/json-to-code.
- Paste the JSON into the input pane.
- Keep TS selected for TypeScript, or pick Go for a Go struct.
- Copy or download the result.
The output includes an exported type alias called Root with the full shape, nested objects written inline. Rename Root to something that means something in your code, such as Order or GithubRepo, and split out nested types if you reuse them.
There is no signup and no watermark, and the page keeps working offline once it has loaded.
Why it matters where you paste
The JSON you want types for is usually real data: a customer record, a payment webhook, a response from an internal service. Pasting it into a website can send it to that site's server. AyeTab parses the input in the browser tab and does not upload it to its servers, so you can convert a production payload without a second thought about where it went.
What to fix by hand
Any tool that works from one sample can only describe that sample. Check three things before you commit the type:
- Optional fields. If a key is missing in some responses, mark it with
?. The sample cannot tell the converter that. - Nullable values. A field that is
nullin your sample may be a string in the next one. Writestring | null. - Arrays of mixed items. If items differ, widen the item type or build a union.
For an API with a published spec, generate types from the spec instead. For quick work on a payload you just captured, a sample-based converter is the fastest route.
The extension and the web app
AyeTab comes as a web app at app.ayetab.com and as a free Chrome extension that puts the same developer tools on your new tab page and in a side panel. Press Ctrl+K or Cmd+K to jump to JSON to Code, or paste a JSON blob and let smart paste suggest a tool. Next to it you will find a JSON formatter, YAML to JSON and cURL to Code, which cover the steps before and after you need a type.
When another tool fits better
If you want classes with serializers, runtime validators or output in many languages, quicktype goes further than a type generator. For a fast, private TypeScript type from a JSON sample, AyeTab is the simpler pick.