Home›Formatters›Code›JSON to TypeScript Interface

JSON to TypeScript Interface

Code

Convert any JSON object to a TypeScript interface instantly. Generates nested interfaces, array types, and union types from your JSON structure. In-browser, no data uploaded.

What is a JSON→TS?

The JSON to TypeScript Interface Formatter converts a JSON object into a TypeScript interface definition — automatically inferring the type of each key from its value. It handles nested objects (generating separate named interfaces), arrays (inferring element types), and mixed-type arrays (generating union types).

TypeScript is the dominant typed superset of JavaScript for web and backend development. When working with REST APIs, GraphQL responses, database records, or configuration files, developers frequently need to write TypeScript interface definitions that match the JSON structure. Writing these by hand for deeply nested JSON objects is slow and error-prone.

This formatter uses a real JSON sample (an actual API response, a database document, or a config file) as input and generates the full TypeScript interface tree in one step.

What it generates:

  • Primitive types: string, number, boolean, null
  • Nested object types: separate interface definitions named from the key in PascalCase
  • Array types: string[], number[], NestedType[], or union arrays (string | number)[]
  • Optional export keyword on all interfaces

What it does not generate: optional fields (?), union types for nullable properties, Date from ISO strings, enums, or runtime validators. The output is a starting point — review and refine for production use.

Related tools: JSON Formatter to inspect and beautify the raw JSON, JSON to CSV Formatter to convert JSON to CSV for spreadsheet use.

All processing is client-side. No data is transmitted.

How to use this JSON→TS calculator

  1. Paste the JSON — paste a real API response, database document, or config file into the input textarea.
  2. Set the root interface name — change from the default RootObject to match your naming convention.
  3. Toggle export — choose whether to add export interface or plain interface.
  4. Copy the output — the generated TypeScript interfaces appear instantly; click the copy button.
  5. Refine the types — mark optional fields, add | null to nullable properties, fix unknown[] arrays.
  6. Related tools: use the JSON Formatter to inspect and beautify raw JSON first.

Formula & Methodology

Type inference rules:

| JSON value | TypeScript type |
|---|---|
| "hello" | string |
| 42, 3.14 | number |
| true, false | boolean |
| null | null |
| [] | unknown[] |
| ["a", "b"] | string[] |
| [1, "x"] | (number \| string)[] |
| { "key": value } | Named interface (key → PascalCase) |

Nested interface naming: key name is converted to PascalCase using word boundary detection (camelCase split, snake_case split, kebab-case split).

Before and after example:

json {   "name": "Alice",   "age": 30,   "address": { "city": "New York", "zip": "10001" } } 

typescript export interface Address {   city: string;   zip: string; }  export interface RootObject {   name: string;   age: number;   address: Address; }

Frequently Asked Questions

It converts a JSON object into a TypeScript interface definition by inferring the type of each key from the JSON value. String values become `string`, numbers become `number`, booleans become `boolean`, null values become `null`, arrays produce typed arrays (e.g. `string[]`), and nested objects produce nested interface definitions. The result is ready to paste into a TypeScript project.
TypeScript's type system helps catch bugs at compile time rather than runtime. When working with API responses, configuration files, or database records in JSON format, generating interfaces from sample data saves the tedious manual work of writing type definitions by hand. Instead of manually declaring every property, you paste a real JSON sample and get a complete interface in seconds.
Nested objects generate separate interface definitions. For example, if the JSON has an `address` key with object value, the formatter generates an `Address` interface (named from the key in PascalCase) and the root interface uses `address: Address;` for that property. Interface names are derived from the key name — `userProfile` becomes `UserProfile`. All nested interfaces are included in the output.
The formatter infers the array element type from the array's contents. An array of strings becomes `string[]`, an array of numbers becomes `number[]`. If an array contains mixed types, a union type is generated: `(string | number)[]`. An empty array produces `unknown[]` — you may want to manually specify the correct type in that case.
Yes — null values produce `null` as the TypeScript type for that property. In practice, you may want to widen the type to `string | null` or `number | null` depending on the API contract. The formatter outputs the most specific type it can infer from the provided JSON sample. If the API can return null or a value for a property, you should update the generated interface accordingly.
No — all processing runs entirely in your browser. The JSON is never sent to any server, stored, or logged. This is important when working with sensitive API response data, database schemas, or configuration files. The tool works offline once loaded.
A JSON Schema is a formal specification for validating JSON documents — it defines allowed types, required fields, string patterns, numeric ranges, and more. A TypeScript interface is a type annotation used at development time in TypeScript code. This formatter generates TypeScript interfaces, not JSON Schemas. For JSON Schema validation, use the [JSON Validator](/json-validator/) to check that a JSON document is syntactically valid.
Paste your JSON object into the input textarea, set the root interface name (default: RootObject), and choose whether to add the `export` keyword. The TypeScript interface appears in the output panel instantly. Click the copy button to copy the generated code for pasting into your TypeScript file.
Yes — if the JSON is an array rather than an object (e.g. `[{"name":"Alice"}]`), the formatter generates a type alias for the root: `export type RootObject = Item[];` with a nested `Item` interface for the array element type. You can rename the root type by changing the Root Interface Name input.
The generated interface is a starting point. Review and refine: mark optional fields as `?: T` instead of `: T` if they can be absent in some API responses, replace `null` with `T | null` union types for nullable fields, and replace `unknown[]` with the correct element type for empty arrays. For production code, consider tools like io-ts or Zod for runtime validation — the [JSON Formatter](/json-formatter/) can help you inspect the full JSON structure before generating.
The formatter infers the basic TypeScript primitive types (string, number, boolean, null) and composite types (arrays and object interfaces). It does not generate enum types, tuple types, `Date` types from ISO date strings, or branded types. For complex type requirements, use the generated interface as a foundation and add specialised types manually.
Also known as
JSON to TypeScriptgenerate TypeScript interfaceJSON type generatorJSON schema to TSconvert JSON to interface