Wizard Toolbox Tool map

JSON to TypeScript

Paste a sample of your JSON and get the TypeScript types that describe it, or a JSON Schema. Copy them or save them as a file.

Write

Declare as

A key that is null

How the types are worked out

Every value in the sample is read and the types follow from what is there. The elements of a list are merged into one type, so a key that appears in some elements but not others is marked optional with ?, and a place that holds more than one kind of value becomes a union, such as string | number or (string | number)[]. A key that is sometimes null gets | null, or you can have it made optional instead. Numbers are all number in TypeScript; the schema says integer when every number seen was whole.

Names

Each nested object gets an interface of its own, named from its key in PascalCase: shipping_address becomes ShippingAddress, and the objects in a list called users become User. Two different shapes that want the same name are told apart with a number (Address2), and two keys holding exactly the same shape share one type. The top type takes the Root name; if the sample is a list, the root is a type alias for a list of RootItem. Keys that are not valid identifiers, like first-name, are quoted.

The JSON Schema

The JSON Schema tab writes a draft 2020-12 schema of the same sample: each nested type goes under $defs and is pointed to with $ref, keys seen every time are listed as required, and unions use a list of types or anyOf. Extra keys are allowed, since a sample rarely shows every key. Both outputs are written in this page; nothing you paste is sent anywhere.

Questions

Why is a key optional when it should always be there?

The types can only describe the sample. If one element of a list lacks the key, it is marked optional. Paste a bigger sample, or remove the ? by hand where you know better.

Can it spot dates, enums or string formats?

No. A date is a string in JSON, and two or three values are not enough to tell an enum from free text, so strings stay string. Narrow them by hand, for example to "draft" | "live".

What is the difference between interface and type?

For object shapes like these they work the same way. An interface can be extended or merged later; a type alias cannot be merged but can be combined with &. Pick whichever your project uses.

What does an empty list or object become?

An empty list gives unknown[] and an empty object Record<string, unknown>, since there is nothing in them to read. If the same key holds items elsewhere in the sample, those items decide the type.

Worked out in this page, on your device ยท nothing is sent anywhere