Utilumo
LightDarkSystem
Guide1 min readUpdated June 29, 2026

How to generate TypeScript types from JSON

Short answer

Take a representative JSON sample and convert each object into a TypeScript interface, mapping its keys to typed fields. This gives you autocomplete and compile-time checks, though you should review optional fields and unions afterward.

Why type your JSON

When data arrives as untyped JSON, the compiler cannot catch a misspelled field or a wrong type. Describing the shape with TypeScript interfaces turns those runtime surprises into compile-time errors and unlocks editor autocomplete.

{ "id": 42, "name": "Ada", "active": true }

interface User {
  id: number;
  name: string;
  active: boolean;
}
JSON in, interface out
Try it: JSON to TypeScriptPaste JSON and get TypeScript interfaces generated locally in your browser.Open tool
From sample to types
JSON sample
Infer field types
TypeScript interface

What to review by hand

  • Optional fields: a sample may omit keys that are sometimes present, so mark them with ?
  • Unions: a field that is sometimes null or different types needs a union like string | null
  • Empty arrays: the generator cannot infer an element type from []
  • Names: generated interface names may need renaming to match your domain
A sample is not a contractGenerated types reflect one example, not the API's full rules. Where possible, validate against a real schema. See What is JSON Schema?.

References

Questions

Will the generated types be perfect?

They are a strong starting point, but a single sample cannot show optional fields, nulls, or rare variants. Review and adjust the output, especially for unions and optional properties.

Should I generate types from JSON or from a schema?

If you have a JSON Schema or OpenAPI spec, generating from it is more accurate because it encodes the real rules. Generating from a sample is convenient when no schema exists.

Does this send my data anywhere?

No. Utilumo's developer tools parse and transform input inside the browser tab. Nothing is uploaded, stored, or logged.

Keep reading