Skip to main content

Developer Tools

JSON to TypeScript Generator

Infer TypeScript types from JSON sample data.

JSON to TypeScript Generator tool

Loading tool…

Jump to a section

About This Tool

JSON responses are common when integrating APIs, importing fixtures, or exploring unfamiliar data, while TypeScript code benefits from explicit shapes. This generator reads a JSON sample and produces a starting set of TypeScript declarations without uploading the data. It handles nested objects, arrays, primitive values, nulls, mixed array samples, and property names that need quoting. The generated code is an inference from one sample, not a replacement for an authoritative API schema.

How To Use It

  1. Paste valid JSON and choose a meaningful root type name such as ApiResponse, User, or ProductList.
  2. Choose interface declarations or type aliases. The structural inference is the same; only the declaration style changes.
  3. Review nested declarations and arrays carefully. Empty arrays become unknown[] because there is no sample element from which to infer a safer item type.
  4. Copy the generated TypeScript and adjust optional properties, nullable fields, literal unions, dates, branded identifiers, or other domain rules using your actual API documentation.

Examples

API response object

A sample containing id: 42, name: "Ada", and active: true produces number, string, and boolean properties under the chosen root declaration.

Nested profile data

An object-valued property such as profile creates a separate Profile declaration and references it from the parent instead of flattening the nested structure.

Mixed array sample

An array containing numbers, strings, and null produces an array of a union of the observed JSON types. An empty array is intentionally unknown[] because its intended element shape cannot be inferred.

Useful Notes

Sample inference is not a schema

JSON records contain values but do not state which fields are optional, whether a number is always an integer, whether a string represents a date, or which values may appear in future responses. Generated declarations should therefore be reviewed against documentation, JSON Schema, OpenAPI, or real domain requirements.

Nested objects and arrays

Nested objects receive named declarations derived from their property names. Arrays inspect the provided elements and combine distinct observed element types into a union. This preserves visible variation in the sample instead of silently choosing only the first element.

Null and missing properties

A literal JSON null is emitted as null because that is the only observed value. Missing properties cannot be discovered from a single object, so the generator does not invent optional markers. If a field may be absent, add ? or an appropriate union after checking the actual contract.

Property and type names

Normal JavaScript identifier keys are emitted directly. Keys such as user-name are quoted so the generated declaration remains valid TypeScript. Root and nested type names are normalized into identifier-friendly PascalCase names.

Local processing and code safety

JSON parsing and TypeScript text generation happen in browser JavaScript. The generated text is displayed as code and is not executed. As with any development data, avoid pasting secrets that are unnecessary for the typing task.

FAQ

Does the generated TypeScript validate data at runtime?

No. TypeScript types are erased at runtime. Use a runtime validator or schema library when untrusted external data must be checked before use.

Why does an empty array become unknown[]?

There is no element in an empty JSON array that reveals the intended item type. unknown[] makes that uncertainty explicit instead of guessing string[], object[], or another shape.

Will the tool mark optional properties automatically?

No. A single JSON object cannot prove whether a present property is required by the real contract. Add optional markers based on API documentation or multiple authoritative schemas rather than guesswork.

Are my JSON values uploaded?

No. Parsing and type generation run locally in your browser and do not require an API request.