Developer Tools

JSON to TypeScript

Paste a JSON sample, such as an API response, and get TypeScript interfaces that describe it. Every nested object becomes a named interface, arrays of objects are merged so that keys missing from some items become optional and values that are null somewhere become nullable, and keys that are not valid identifiers are quoted. Choose interfaces or type aliases, unknown or any, readonly properties and exports.

  • Runs in your browser
  • No sign-up
  • Free to use

How to use JSON to TypeScript

  1. Paste a representative JSON sample; include several array items if you can.
  2. Set the root type name.
  3. Choose interface or type alias and the other options.
  4. Copy the types or download types.ts.

JSON to TypeScript features

Named nested types

Each object gets its own interface, named after its key.

Smart merging

Array items are combined; missing keys become optional, nulls nullable.

Reuse

Objects with the same shape share one interface.

Safe keys

Keys such as "content-type" are quoted automatically.

Options

interface or type, unknown or any, readonly, export.

Local

Generated in your browser; the JSON is not uploaded.

When to use JSON to TypeScript

  • Typing a REST API response in a React, Vue or Angular app.
  • Creating types for a JSON configuration file.
  • Bootstrapping models for a Node.js service.
  • Documenting the shape of webhook payloads.

JSON to TypeScript FAQ

How are optional properties decided?

When an array contains several objects, a key that is missing from at least one of them is marked optional with ?. A key that is present but null somewhere gets | null.

Why unknown instead of any?

unknown forces code to check a value before using it, which keeps type safety. Fields that were always null or had mixed types use it. Choose any if you prefer.

Are dates typed as Date?

No. JSON has no date type, so date strings stay string; a comment marks fields that look like ISO dates.

Can it handle a top-level array?

Yes. The item type gets an interface and the root becomes a type alias such as type Root = RootItem[].

How accurate is the result?

As accurate as the sample. A single example cannot show which fields are optional or which values can be null, so review the types against the API documentation.

Is my JSON sent to a server?

No. Everything runs in your browser.

Inferring types from JSON

TypeScript can only check code against data it knows the shape of, and for data coming from APIs, files or databases that shape has to be written down. Doing it by hand for a large response is slow and easy to get wrong. Inferring it from a real sample gives a correct starting point in seconds, which you can then refine with knowledge the sample cannot provide.

The generator walks the JSON and records the type of every value. Objects become interfaces named after the property that holds them, so an "address" object becomes Address and items of an "orders" array become Order. When two objects have exactly the same structure they share one interface, and when names clash a number is added.

Arrays are where inference matters most. Instead of looking only at the first item, the generator merges all of them: a property missing from some items is marked optional, a property that is null in some items gets a null union, integers and decimals combine into number, and genuinely mixed values fall back to unknown. Including several varied items in the sample therefore produces more accurate types.

The output follows common TypeScript conventions. Interfaces are the default because they produce clearer error messages and can be extended; type aliases are available for teams that prefer them. Keys that are not valid identifiers are quoted, readonly marks data that should not be changed, and the export keyword makes the types ready to import from other files.

Generated types describe what the sample showed, not what the API promises. Fields that are optional but happened to be present will be marked required, and values that are always null in the sample cannot be typed. Compare the result with the API documentation or a JSON Schema, and use the JSON Schema Generator if you need runtime validation as well.

Other useful tools