JSON to TypeScript Type Guide

Why Convert JSON to TypeScript Types

In frontend-backend collaboration, API responses are typically in JSON format. Writing TypeScript interfaces manually is time-consuming and error-prone, especially when interfaces have many fields and deep nesting. Auto-generating type definitions can:

• Reduce the effort of writing interfaces by hand
• Prevent field name typos
• Keep frontend and backend types consistent
• Speed up code completion and refactoring

Basic Conversion Rules

Simple Object

{
  "id": 1,
  "name": "Alice",
  "active": true
}

Generated result:

interface RootObject {
  id: number;
  name: string;
  active: boolean;
}

Type Mapping Rules

JSON Value	TypeScript Type
"hello"	string
42	number
3.14	number
true / false	boolean
null	null
[1, 2, 3]	number[]
{"a": 1}	Nested interface

Using JSON→TypeScript Tool

Step 1: Get JSON Data

Copy the API response from your browser's DevTools Network panel, or paste existing JSON data directly.

Step 2: Open the Tool

Navigate to JSON→TypeScript Tool and paste your JSON into the input area.

Step 3: Configure Generation Options

• Root interface name: Default is RootObject; use a semantic name like UserInfo
• Export modifier: Choose interface or type
• Optional fields: Whether fields with null values are marked as optional (?)
• Readonly modifier: Whether to add readonly to all fields

Step 4: Generate and Copy

Click the generate button. The TypeScript type definition appears instantly — copy it to your clipboard with one click.

Handling Nested Objects

Deeply nested JSON is automatically split into multiple interfaces:

{
  "user": {
    "profile": {
      "avatar": "url",
      "bio": "text"
    }
  }
}

Generated:

interface Profile {
  avatar: string;
  bio: string;
}

interface User {
  profile: Profile;
}

interface RootObject {
  user: User;
}

It's recommended to split generated interfaces into separate files, organized by module.

Handling Union Types

When an array contains elements of different types:

{
  "items": ["text", 42, true]
}

The tool generates a union type:

interface RootObject {
  items: (string | number | boolean)[];
}

Handling Optional Fields

Some fields in API responses may be absent. Common approaches:

• When a field value is null, mark it as optional: bio?: string | null
• When a field is missing, mark it as optional: bio?: string
• Enable "Mark null fields as optional" in the tool to handle this automatically

In Practice: Generate Types from a Real API

1. Open browser DevTools → Network panel
2. Find the target API request, right-click → Copy Response
3. Paste into JSON→TypeScript Tool
4. Set the root interface name (e.g., ApiResponse)
5. Copy the generated output to your project's types/ directory

Common Issues

Issue	Cause	Solution
Types too specific	Inferred from single data sample	Add more sample data
Nesting too deep	Complex JSON structure	Manually merge some interfaces
Inconsistent array element types	Mixed-type arrays	Use union types or generics
Dates become string	JSON has no date type	Manually change to Date type

Advanced Tips

1. Format JSON with JSON Formatter before generating types
2. Use the same approach with JSON→Go Tool to generate Go structs
3. Pair generated interfaces with Zod for runtime validation
4. For large projects, use openapi-typescript to generate from Swagger

Summary

Auto-generating TypeScript types from JSON is a powerful way to boost development efficiency. JSON→TypeScript Tool lets you complete type definitions in seconds, avoiding the tedium and errors of manual writing. Combined with the nesting and optional field techniques in this guide, you can handle any complex scenario.