Developer Tools Runs in your browser Free · no account

JSON to TypeScript

The JSON to TypeScript converter reads a sample payload and generates matching interfaces, naming nested objects after the keys that hold them. Mixed arrays produce a union of their element types rather than being typed from the first item alone, so the result describes the sample honestly.

Options
JSON 0 characters
TypeScript

Your result will appear here.

Not sure where to start? Use Load example.

Results update automatically and are calculated on your device. Nothing you type is sent to a server.

Runs in your browser. Processing happens entirely in your browser. Nothing you enter is sent to Delimiter.live.

How to use the JSON to TypeScript

  1. Paste a representative JSON payload — one that includes every field you care about.
  2. Give the root interface a name that matches what the payload represents.
  3. Read the generated interfaces; nested objects are named after the key that holds them.
  4. Copy or download the result into your project.

Example

Input
{"id": 1, "tags": ["a"]}
Output
export interface Root {
  id: number;
  tags: string[];
}

Common use cases

  • Typing a third-party API response that has no published types.
  • Turning a saved fixture into interfaces for a test suite.
  • Bootstrapping types for a configuration file before hand-editing them.
  • Checking how a payload would be typed before committing to a shape.

Limitations and things to watch for

  • Types are inferred from one sample. A field that is absent from your sample cannot be inferred, and a field that happens to be null in the sample cannot be typed beyond null — supply a representative payload.
  • Every number becomes number. TypeScript has no integer type, so there is no distinction to preserve.
  • Optional fields cannot be detected from a single object. If your API omits keys rather than sending null, mark those fields optional yourself.
  • Dates arrive as strings in JSON, so a date field is typed string rather than Date.

Frequently asked questions

How are nested objects named?
After the key that holds them, converted to PascalCase — an address object becomes an Address interface. Where two different objects would produce the same name, a number is appended so the declarations stay distinct.
What happens with a mixed array?
Its element types are combined into a union, so an array holding strings and numbers is typed (string | number)[] rather than being guessed from the first element. An empty array becomes unknown[], since there is nothing to infer from.
Why is my field typed null?
Because it was null in the sample, and null is all that can be inferred from that. Supply a sample where the field has a real value, or turn on the optional setting to mark those fields as optional unknown instead.
Does it generate types or interfaces?
Interfaces for objects, because they are extendable and produce clearer error messages. A root that is an array or a primitive is emitted as a type alias instead, since an interface cannot describe those.

Share this tool