--- title: "JSON to TypeScript Converter: Interfaces Online | Prettify" description: Convert JSON to TypeScript interfaces in your browser. Nested objects get their own interfaces, and optional and union types are inferred. No upload. url: https://prettify.tools/json-to-typescript --- # JSON to TypeScript Paste a JSON sample, such as an API response, and get TypeScript interfaces for it. Every nested object gets its own named interface, arrays get typed items, and a key that only some items have becomes optional. Copy the result into your code or download it as a .ts file. ## How the types are inferred Prettify generates the types with quicktype, which reads your sample and infers a type for every value. The root type is named Root. Each nested object gets an interface named after its key, so an orders array of objects gives an Order interface. When the items of an array have different shapes, quicktype merges them. A key that only some items have becomes optional, and a key with values of different types becomes a union. ## Key features The output is plain TypeScript that you can paste into a .ts file. - One exported interface for each object shape. - Optional properties, marked with ?, for keys that are missing in some items. - Union types for keys whose values differ in type. - Typed arrays, such as string\[] and Order\[]. - A null value in the sample is typed as null. - Download saves the result as prettify.ts. ## How to generate TypeScript from JSON Generate in the box on this page, or with Generate Types in the editor. The generator loads the first time you use it, which takes a moment. The box takes samples up to 512 KB. 1. Paste a JSON sample into the box labeled "Paste your JSON", or select "Try an example". 2. Read the interfaces in the panel labeled TypeScript. 3. Select Copy, or Download to save prettify.ts. 4. Rename Root to a name that fits your code. 5. For Go, Kotlin, or Rust types, select "Open in full editor" and then Generate Types in the Transform group of the toolbar. ## Worked example: a user record The sample below has a date, a nested address, and an orders array in which only one item has a gift key. The second block is the result from the box. The gift key became optional in Order. The zip value was null in the sample, so it is typed as null. Widen it to string | null if your data can hold a value there. ``` { "id": 1042, "name": "Ada Lovelace", "joined": "2024-03-01T09:30:00Z", "tags": ["admin", "beta"], "address": { "city": "London", "zip": null }, "orders": [ { "sku": "KB-01", "qty": 2 }, { "sku": "MS-07", "qty": 1, "gift": true } ] } export interface Root { id: number; name: string; joined: Date; tags: string[]; address: Address; orders: Order[]; } export interface Address { city: string; zip: null; } export interface Order { sku: string; qty: number; gift?: boolean; } ``` ## Dates and large numbers Strings that look like dates and times are typed as Date, as joined is in the example. JSON has no date type, so JSON.parse returns these values as strings. Change the type to string, or convert the values when you read them. Large integers are typed as number. A JavaScript number cannot hold a 64-bit ID exactly, so if your API sends such IDs, type them as string in your code and ask the API to send them as strings. ## Use a sample that covers your data The generator knows only what your sample shows. If a field is sometimes missing or null, include an example of that, for instance as a second item in an array. The more variety the sample has, the closer the types are to your real data. ## Common uses Typing data by hand is slow, and it drifts from the real shape. A generated type is a fast and accurate first draft. - Type an API response before you write the client code that reads it. - Type a JSON config file that your code loads at startup. - Check the shape of a large or unfamiliar document by reading its interfaces. - Start a shared type for data that a front end and a back end exchange. ## Limits to know The generator writes types, not validation. TypeScript checks types when you compile, not when data arrives, so a response with a different shape is not caught at run time. To check data at run time, generate a JSON Schema from the same sample and validate against it. ## Frequently asked questions ### Does it generate interfaces or type aliases? Interfaces, one for each object shape. You can turn any of them into a type alias by hand when you need a union or a mapped type around it. ### Is my JSON uploaded to generate the types? No. Generation runs in your browser. The generator loads the first time you use it, and your JSON stays on your device. ### Why is a date typed as Date? quicktype reads strings in ISO date format as dates. JSON.parse does not, so change the type to string unless your code converts the value. ### Can I generate types from YAML? Yes, in the editor. Open the YAML document and select Generate Types. The box on this page reads JSON only. ### Is the JSON to TypeScript converter free? Yes. Generating types on this page and with Generate Types in the editor is free, with no account and no limit on use. ### Why are the interfaces indented with four spaces? That is the style quicktype writes. Run your formatter, such as Prettier, on the file after you paste it, and the indentation matches the rest of your code. ## Related tools - [JSON to JSON Schema](https://prettify.tools/json-to-schema) - [JSON Formatter: Prettify and Pretty Print JSON](https://prettify.tools/json-formatter) - [JSON Viewer with Tree, Table, and Diagram Views](https://prettify.tools/json-viewer) - [JSON Schema Validator](https://prettify.tools/json-schema-validator) - [JSON Validator](https://prettify.tools/json-validator) - [YAML to JSON Converter](https://prettify.tools/yaml-to-json) ## Structured data ```json { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Prettify", "url": "https://prettify.tools", "description": "Multi-format data viewer, editor, and query engine for JSON, YAML, CSV, XML, Mermaid, Markdown, MDX, HTML, and SVG", "applicationCategory": "DeveloperApplication", "operatingSystem": "Web, macOS, Windows, Linux", "offers": [ { "@type": "Offer", "price": "0", "priceCurrency": "USD", "description": "Free tier with core features" }, { "@type": "Offer", "price": "19.99", "priceCurrency": "USD", "description": "Pro: lifetime access to all features" } ], "publisher": { "@id": "https://prettify.tools/#organization" } } { "@context": "https://schema.org", "@type": "Organization", "@id": "https://prettify.tools/#organization", "name": "Prettify", "legalName": "Off Leash Labs", "url": "https://prettify.tools/", "logo": { "@type": "ImageObject", "url": "https://prettify.tools/icon-512.png", "width": 512, "height": 512 }, "contactPoint": { "@type": "ContactPoint", "contactType": "customer support", "email": "offleashlabs@gmail.com", "availableLanguage": "English" } } { "@context": "https://schema.org", "@graph": [ { "@type": "WebPage", "@id": "https://prettify.tools/json-to-typescript", "url": "https://prettify.tools/json-to-typescript", "name": "JSON to TypeScript Converter: Interfaces Online | Prettify", "description": "Convert JSON to TypeScript interfaces in your browser. Nested objects get their own interfaces, and optional and union types are inferred. No upload.", "isPartOf": { "@type": "WebSite", "name": "Prettify", "url": "https://prettify.tools" } }, { "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "Does it generate interfaces or type aliases?", "acceptedAnswer": { "@type": "Answer", "text": "Interfaces, one for each object shape. You can turn any of them into a type alias by hand when you need a union or a mapped type around it." } }, { "@type": "Question", "name": "Is my JSON uploaded to generate the types?", "acceptedAnswer": { "@type": "Answer", "text": "No. Generation runs in your browser. The generator loads the first time you use it, and your JSON stays on your device." } }, { "@type": "Question", "name": "Why is a date typed as Date?", "acceptedAnswer": { "@type": "Answer", "text": "quicktype reads strings in ISO date format as dates. JSON.parse does not, so change the type to string unless your code converts the value." } }, { "@type": "Question", "name": "Can I generate types from YAML?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, in the editor. Open the YAML document and select Generate Types. The box on this page reads JSON only." } }, { "@type": "Question", "name": "Is the JSON to TypeScript converter free?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. Generating types on this page and with Generate Types in the editor is free, with no account and no limit on use." } }, { "@type": "Question", "name": "Why are the interfaces indented with four spaces?", "acceptedAnswer": { "@type": "Answer", "text": "That is the style quicktype writes. Run your formatter, such as Prettier, on the file after you paste it, and the indentation matches the rest of your code." } } ] } ] } ```