Loading...
Generate TypeScript interfaces from a JSON sample. Handles nested objects, arrays, and null values. Client-side only.
JSON Input
TypeScript Output
Pro tip
Untyped API responses in PRs? Git AutoReview flags missing type annotations and suggests TypeScript improvements on every pull request.
Paste a JSON sample into the left panel and TypeScript interfaces generate automatically. Set the interface name in the field above — it defaults to Root. Nested objects become sub-interfaces named after their key. Press Ctrl+Enter to regenerate manually, Ctrl+Shift+C to copy the output.
We map each JSON value to its TypeScript equivalent: strings stay string, numbers stay number, booleans stay boolean, and null becomes null with a ? on the property. Arrays type from the first element. A nested object under address generates an Address interface.
Arrays of objects generate a sub-interface from the first element. Mixed arrays (numbers and strings together) produce a union type like (string | number)[]. Empty arrays become unknown[] — there is no sample to infer from, so you will need to annotate those yourself after generating.
The most useful thing you can do is drop the output into a types.ts file and annotate your API calls immediately. Once your fetch response is typed, TypeScript starts catching misspelled property names at compile time rather than as undefined errors in production — which is the entire reason to do this instead of working with any.
One sample only captures one state. A field that is sometimes null and sometimes a string will reflect whatever it happened to be in your snapshot. Fields that are absent in some responses but not others will not show as optional — you need to add the ? yourself. The generated types are accurate scaffolding, not a complete contract, so always cross-check against your API documentation before shipping.
Press Ctrl+Enter to generate interfaces. Press Ctrl+Shift+C to copy the TypeScript output.
The short version: interfaces tell TypeScript what shape an object has, and the moment you annotate an API response with one, the compiler catches undefined property access before it blows up in production. Generating the interface from a real response sample is faster and more accurate than writing it by hand, and it means autocomplete actually knows what fields exist instead of just returning any.
Copy the output and drop it into a .ts or .d.ts file in your project. Then annotate your fetch call: const user: User = await fetchUser(). From that point TypeScript will flag any access to a property that does not exist on the type, which is the whole point.
Properties that are null in the sample get inferred as nullable and marked optional with a ?. The honest limitation is that one JSON sample cannot distinguish between a field that happens to be null right now and a field that is genuinely sometimes absent. If a property should be optional rather than nullable, add the ? manually after reviewing the generated output.
Arrays are typed as T[] based on the first element. If the array holds objects, those become their own sub-interface. Mixed arrays with numbers and strings together become a union type like (string | number)[]. Empty arrays become unknown[] since there is nothing to infer from — you will need to annotate those yourself.
A single sample only captures one possible state of the data. A field that is sometimes a string and sometimes null will only show what it was at snapshot time. A field that is missing in some responses but present in others will not appear as optional. Treat the generated types as a starting point and review them against your actual API contract or multiple response samples.
Ctrl+Enter (Cmd+Enter on Mac) to generate interfaces, Ctrl+Shift+C to copy the TypeScript output.
Developer Toolkit by Git AutoReview
Free tools for developers. AI code review for teams.