JSON to TypeScript Converter

Convert JSON to TypeScript Online

Use our free json to typescript converter to generate accurate TypeScript interfaces and type definitions from any JSON data instantly. Whether you are building type-safe APIs, creating json to ts definitions for frontend applications, or scaffolding data models for full-stack projects, this tool produces clean, ready-to-use TypeScript code from your JSON input.

What is JSON Format

JSON, short for JavaScript Object Notation, is a lightweight data interchange format that serves as the universal standard for web-based data communication. Its syntax of key-value pairs enclosed in curly braces and arrays enclosed in square brackets makes it intuitive for both humans and machines to read and write. JSON supports strings, numbers, booleans, null, nested objects, and arrays as value types.

JSON has become the default format for REST API responses, NoSQL database storage, configuration files, and data exchange between microservices. Every modern programming language includes built-in or standard library support for parsing and generating JSON. Its simplicity and broad adoption make it the starting point for most data modeling workflows, particularly in web development where JSON payloads flow between servers and clients continuously.

What is TypeScript Format

TypeScript is a strongly typed superset of JavaScript developed by Microsoft that compiles to plain JavaScript. TypeScript adds optional static type annotations, interfaces, enums, generics, and other type system features that enable developers to catch errors at compile time rather than at runtime. TypeScript interfaces and type aliases define the shape of data objects, specifying which properties exist and what types they hold.

TypeScript interfaces are particularly valuable for defining the structure of JSON data consumed by applications. An interface declaration specifies property names, their types, and whether they are optional or required. TypeScript supports primitive types like string, number, and boolean, as well as complex types including arrays, tuples, union types, and nested object types. The language has seen massive adoption in the frontend ecosystem with frameworks like Angular, React, and Vue all offering first-class TypeScript support, and in backend development through Node.js and Deno.

How the Conversion Works

Converting JSON to TypeScript involves analyzing the structure and values of a JSON document to infer appropriate TypeScript types for each property. The converter parses the input JSON, examines each value to determine its type, and generates interface declarations that accurately describe the data shape. Strings become the string type, numbers become number, booleans become boolean, null becomes null, arrays become typed arrays, and nested objects become separate named interfaces.

The conversion engine handles complex scenarios including arrays with mixed types by generating union types, optional properties detected from multiple sample objects, and deeply nested structures that produce multiple related interfaces. If you need to work with your JSON data in other formats first, you can convert JSON to YAML for configuration purposes or transform JSON into XML for enterprise system integration. For generating typed models in other languages, explore our JSON to Java class generator or JSON to Python dataclass converter.

Syntax Comparison

The relationship between JSON data and TypeScript interfaces is direct and intuitive. A JSON object like this:

// JSON
{
  "name": "Alice",
  "age": 30,
  "active": true,
  "email": null
}

Generates the following TypeScript interface:

// TypeScript
interface Root {
  name: string;
  age: number;
  active: boolean;
  email: null | string;
}

JSON arrays are mapped to TypeScript array types. A JSON array of strings like ["red", "green"] becomes string[] in TypeScript. Arrays containing objects generate a separate interface for the object shape and use that interface as the array element type. Nested JSON objects produce additional named interfaces, with the parent interface referencing the child interface by name. This approach keeps the generated code clean and modular rather than using deeply nested inline type definitions.

Common Use Cases

The most common use case for JSON to TypeScript conversion is creating type definitions for API responses. Frontend developers working with REST APIs receive JSON payloads that need to be properly typed for safe consumption in TypeScript applications. Rather than manually writing interfaces by inspecting API documentation, developers can paste a sample response and instantly generate accurate type definitions.

Another frequent scenario involves migrating JavaScript projects to TypeScript. Existing codebases often have JSON configuration files, mock data, or fixture files that need corresponding type definitions. Converting these JSON structures to TypeScript interfaces accelerates the migration process significantly. Additionally, full-stack developers use this conversion to keep their frontend types synchronized with backend API contracts, ensuring that any changes to the data structure are reflected in the TypeScript types used by the client application.

JSON to TypeScript Examples

The following examples demonstrate how various JSON structures are converted into TypeScript interfaces. These cover the most common patterns encountered when generating type definitions from API responses and data models.

A JSON object with basic types generates a simple interface:

// JSON Input
{
  "user": {
    "id": 1,
    "username": "jsmith",
    "email": "jsmith@example.com",
    "verified": true,
    "score": 95.5
  }
}

// TypeScript Output
interface User {
  id: number;
  username: string;
  email: string;
  verified: boolean;
  score: number;
}

Nested objects and arrays produce multiple related interfaces:

// JSON Input
{
  "order": {
    "id": "ORD-001",
    "customer": {
      "name": "Alice Johnson",
      "address": {
        "street": "123 Main St",
        "city": "Springfield",
        "zip": "62701"
      }
    },
    "items": [
      {"product": "Widget", "quantity": 3, "price": 9.99},
      {"product": "Gadget", "quantity": 1, "price": 24.99}
    ],
    "total": 54.96
  }
}

// TypeScript Output
interface Address {
  street: string;
  city: string;
  zip: string;
}

interface Customer {
  name: string;
  address: Address;
}

interface Item {
  product: string;
  quantity: number;
  price: number;
}

interface Order {
  id: string;
  customer: Customer;
  items: Item[];
  total: number;
}

Frequently Asked Questions

Does the converter generate interfaces or type aliases?

By default, the converter generates TypeScript interfaces because they are the most common and idiomatic way to define object shapes in TypeScript. Interfaces support declaration merging and extension, making them more flexible for most use cases. Type aliases using the type keyword are functionally similar for object shapes but lack these extensibility features. If your project conventions require type aliases, you can easily rename the interface keyword to type in the generated output.

How are JSON arrays with mixed types handled?

When a JSON array contains elements of different types, the converter generates a union type for the array elements. For example, an array like [1, "hello", true] produces the type (number | string | boolean)[]. Arrays containing objects with different shapes generate a union of the distinct object interfaces. This approach ensures type safety while accurately representing the variability present in the source data.

Can I generate types for nested JSON structures?

Yes, the converter automatically creates separate named interfaces for each nested object encountered in the JSON input. Rather than producing deeply nested inline types that are difficult to read and reuse, the tool extracts each distinct object shape into its own interface with a descriptive name derived from the parent key. This modular approach produces cleaner code that is easier to maintain and extend in your TypeScript projects.

How are JSON null values typed in TypeScript?

JSON null values are typed as null in the generated TypeScript interface. When a property can be either a value or null, the converter produces a union type such as string | null. This accurately represents nullable fields commonly found in API responses where a property may or may not have a value. If you prefer using optional properties with the question mark syntax instead, you can adjust the generated output to use property?: string notation.

Does the tool support generating types from multiple JSON samples?

The converter works with a single JSON input at a time. However, you can generate more accurate types by providing a JSON sample that includes all possible property variations. For API responses that may have optional fields, include a sample that contains all fields to ensure the generated interface is comprehensive. You can then manually mark infrequently appearing properties as optional using the TypeScript question mark syntax.

How do I handle JSON keys with special characters?

JSON allows any string as a key, but TypeScript identifiers have restrictions. When the converter encounters JSON keys containing spaces, hyphens, or other special characters, it wraps them in quotes in the interface definition. For example, a key like "first-name" becomes "first-name": string in the interface, which is valid TypeScript syntax. Properties with quoted keys must be accessed using bracket notation like obj["first-name"] rather than dot notation in your code.

Can I use the generated types with popular frameworks?

The generated TypeScript interfaces are standard TypeScript and work seamlessly with all major frameworks including React, Angular, Vue, Next.js, and Express. You can use them directly as props types in React components, as model definitions in Angular services, or as request and response types in Express route handlers. The interfaces are framework-agnostic and follow TypeScript best practices that are compatible with any TypeScript project configuration.

How does this compare to generating Java or Python classes?

While the concept is similar, TypeScript interfaces are purely compile-time constructs with no runtime overhead, unlike Java classes or Python dataclasses which generate actual runtime code. TypeScript interfaces define shape contracts that are erased during compilation to JavaScript. If you need runtime class generation for other languages, explore our JSON to Java converter or JSON to Python converter which produce executable class definitions with constructors and methods.