How to use the JSON to TypeScript Interface
- 1. Paste JSONA sample API response or data object.
- 2. Pick optionsRoot name, interface or type, export and readonly.
- 3. Copy the typesGenerate and paste into a .ts file.
How the types are worked out
- Strings, numbers and booleans map to
string,numberandboolean. - Nested objects get their own named interface; array items are named in the singular (orders → Order).
- When array items have different keys, keys missing from some items become optional with
?. - Arrays with mixed values get union types like
(string | number)[]. nullbecomes| null, or justnullwhen no other type is seen.- Empty arrays become
unknown[], which is safer than any.
Worked example
The sample user has an id, name, a null email, a roles array, a profile object and two orders where only the second has a coupon. The generator writes 3 interfaces: User, Profile and Order. Order is:
export interface Order {
orderId: string;
amount: number;
coupon?: string;
}coupon is optional because it appears in only one of the two orders. User gets roles: string[], profile: Profile, orders: Order[] and email: null. Change that last one to string | null by hand if you know the field can hold text, since one sample cannot show every case.
interface or type? Both work for object shapes. Interfaces can be extended and merged; type aliases can also describe unions. Pick whichever your project's style guide prefers.
Frequently asked questions
Does it handle a top-level array?
Yes. It merges the objects in the array into one item interface and adds a type alias for the list.
Why is a field typed as null?
Every sample value was null, so its real type is unknown. Widen it to string | null or similar yourself.
Can I generate Zod schemas?
Not here. This tool generates TypeScript types only.
Is the json to typescript interface free?
Yes, it is free. Generating your first types asks for your name and WhatsApp number once, and after that the json to typescript interface and every other Uncodemy tool open without the form.