OnSumoTools

JSON to TypeScript Type Generator

This tool generates TypeScript interfaces from any JSON object you paste in. It infers types for all properties, handles nested objects and arrays, names the output interfaces based on key structure, and produces ready-to-copy TypeScript code. Everything runs in your browser. Your JSON payload never leaves your device.

Valid JSON2 types generated

Generated TypeScript

export interface RootType {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
  owner: Owner;
}

export interface Owner {
  email: string;
  role: string;
}

Generated types are inferred from sample data. Verify nullable and optional fields against your API contract.

Nested types

  • Owner
  • RootType

Type generation runs in your browser. JSON samples are not sent to a server.

How does the JSON to TypeScript Interface Generator work step by step?

The JSON-to-TypeScript converter infers a TypeScript interface from a JSON value by traversing the object graph and assigning each key a TypeScript type: string, number, boolean, null, typed arrays, and nested interfaces for object values. When a field appears in some array elements but not others, the tool marks it as optional (key?: type). When a field holds null in the JSON, the inferred type is the detected base type combined with null (string | null) unless every sample value is null, in which case the type falls back to unknown. Interface names are PascalCase-converted from the top-level input or from a name you provide. For arrays of mixed-type objects the tool merges all observed key-type pairs across every element into a single interface representing the superset of all observed fields. Key assumption: type inference is based entirely on the sample JSON provided. If a field can hold a string or number at runtime but only a string appears in the sample, the inferred type is string and will miss the number case. Always use a representative sample covering all value variations. Edge case: deeply recursive JSON structures, such as a tree where each node contains an array of children of the same shape, require a recursive interface definition. The tool detects self-referential shapes up to five levels deep and emits a recursive type alias using the interface's own name.

What does a typical JSON to TypeScript Interface Generator result look like?

An API returns a user object with nested address data. Paste the response JSON, keep extract named for arrays and objects, then copy the generated interfaces into your project.

Frequently asked questions

  • Does the tool send my JSON to a server?

    No. The entire conversion runs in your browser using JavaScript. Your JSON, which may contain sensitive API responses, tokens, user data, or internal payloads, never leaves your device. You can verify this by watching the Network tab in browser DevTools while using the tool: no outbound request is made.

  • How does it handle arrays with mixed types?

    If an array contains elements of different types (e.g., [1, \\\\\\\"two\\\\\\\", true]), the tool infers the type as unknown[] and adds a comment noting that the array contains mixed types. For arrays where all elements are objects with the same structure, it generates a single interface for the element type and types the array as ElementType[].

  • Should I use `interface` or `type` in TypeScript?

    Both work for object shapes. interface is preferred when you need to extend or implement the type later. type is more flexible and supports union types, intersections, and mapped types. The tool outputs interface by default. A toggle switches to type syntax if your codebase prefers it.

  • How do I handle date fields typed as string?

    JSON has no native date type. Dates in JSON are always strings (ISO 8601 by convention). The generated interface types them as string. If you want to work with Date objects in your code, add a transformation layer that converts the string to a Date after parsing. You can also manually change string to a branded type like ISODateString for documentation clarity.

  • What if the same nested object shape appears in multiple places?

    The current version generates a separate named interface for each occurrence, even if two nested objects have identical structures. You can manually merge duplicate interfaces after generation. A deduplication option that identifies structurally identical interfaces and consolidates them is planned for a future version.

  • Is the generated TypeScript compatible with strict mode?

    Yes, with one caveat. null values in the JSON are typed as null, which is correct in strict mode. If you use the \\\\\\\"mark null as optional\\\\\\\" setting, the generated property?: T | null is also strict-mode compatible. The tool does not generate any types for any inferred value.

Related tools

Stop typing out types by hand

You call an API, get a big JSON response and now need types for it. Writing them by hand means reading every field, guessing which are optional and fixing typos later. It's dull work and it's easy to get wrong.

Paste the JSON and this tool writes TypeScript for you. Pick interfaces, type aliases or Zod schemas, and nested objects get their own named types.

Interface or type?

For plain object shapes, either works, and the choice is mostly taste. Interfaces can be extended and merged, which suits public APIs and class-based code. Type aliases handle unions and more complex combinations. Pick one and stay consistent across the project.

Zod output is different. A Zod schema checks data at runtime, and you can derive the TypeScript type from it. That's worth it when the data comes from outside your code, like a network call, where TypeScript alone can't protect you.

Optional fields and mixed arrays

A sample can only show you what's in the sample. If a field is missing in one object of an array, the tool marks it optional. Fields that are null are typed accordingly. Arrays that mix several types become a union.

One sample isn't proof. If the API sometimes returns a field and sometimes doesn't, paste a response that has it, or edit the output afterward. Always read the result before you ship it.

Repeated shapes and dates

When the same nested shape appears in several places, you may end up with similar types in more than one spot. Merge them by hand into one shared type if you want a tidy file.

Dates in JSON are strings. The generated type will say string, because that's what JSON carries. If you convert them to Date objects in your code, type the converted version separately, or let a Zod schema do the transform.

Strict mode

The output is written to work with strict mode, so you don't have to loosen your compiler settings to use it.

Your JSON is processed in the browser and isn't uploaded. Still, strip real tokens and personal data from samples before pasting them anywhere, out of habit.