Last week I was integrating a third-party payment API. The documentation dumped a 200-line JSON sample on me and said "have fun." My first instinct? Open VS Code and start typing interface PaymentResponse { by hand. About 50 lines in, I realized I'd already mistyped transactionId as trasnactionId on line 12. I backed out, hit Ctrl+Z a few times, and finally asked myself: why am I doing this manually?

Here's the thing — when you're stitching together APIs all day, you don't need to be a typing machine. You need to be a problem-solver. And manually transcribing JSON into TypeScript interfaces is not problem-solving. It's data entry.

The Real Pain: Nested Objects and Optional Fields

Let me show you the kind of JSON that actually shows up in production.

{
  "user": {
    "id": 12345,
    "profile": {
      "firstName": "Alex",
      "lastName": "Chen",
      "avatar": null
    },
    "orders": [
      {
        "orderId": "ORD-001",
        "items": [
          { "sku": "A100", "qty": 2, "price": 29.99 },
          { "sku": "A101", "qty": 1, "price": 49.99 }
        ]
      }
    ],
    "preferences": {
      "notifications": true,
      "theme": "dark"
    }
  }
}

When I look at this, my brain immediately starts mapping the nesting. user.profile.firstName is a string. user.orders[].items[].price is a number. avatar could be null, so it's optional or a union type. Writing all of that by hand is tedious and error-prone.

With a JSON-to-TypeScript converter, I paste the raw JSON in, and out comes this:

interface OrderItem {
  sku: string;
  qty: number;
  price: number;
}

interface Order {
  orderId: string;
  items: OrderItem[];
}

interface UserProfile {
  firstName: string;
  lastName: string;
  avatar: string | null;
}

interface User {
  id: number;
  profile: UserProfile;
  orders: Order[];
  preferences: Record<string, any>;
}

How the Conversion Actually Works

Most online converters parse the JSON into a tree, then walk it recursively. For each object, they generate an interface. For each key, they infer the type from the value. Numbers become number, strings become string, arrays check their first element to infer the item type.

The tricky part is optional fields. In JSON, a missing key is different from a key with a null value. Good converters handle both. If a key appears in some objects but not others, it gets flagged as optional with ?. If a value is null, you get a union type like string | null.

I've been using this approach for the past few months, and it's saved me more time than I want to admit. Every time I see a new API endpoint, I just grab the response JSON, run it through the tool, and drop the generated interfaces straight into my project.

If you want to read more about handling complex data structures in TypeScript, check out our guide on /blog/jsonformatter--convert-json-to-csv-without-code for flattening deeply nested data.

Real Workflow: API Integration in Under 5 Minutes

Here's my actual workflow when integrating a new endpoint:

  1. Hit the endpoint and copy the JSON response
  2. Paste it into the JSON formatter tool
  3. Switch to TypeScript output
  4. Copy the generated interfaces into my types file
  5. Add any missing comments or tweak field names
  6. Done

That's it. No manual typing, no squinting at brackets trying to figure out if I'm three levels deep. And because the tool handles nesting automatically, I never miss a sub-type.

// Before: I'd write this by hand and inevitably mess it up
// After: Generated in 2 seconds

export interface ApiResponse<T> {
  status: number;
  data: T;
  errors: ApiError[];
  timestamp: string;
}

export interface ApiError {
  code: string;
  message: string;
  field?: string;
}

The ApiResponse<T> generic pattern is something I add manually after generation — the tool gives me the raw interfaces, and I wrap them in generics myself. It's a small price to pay for not typing out every single nested interface.

Handling Edge Cases

Not all JSON is clean. Real APIs return messy data. Here are the edge cases I've run into and how online converters typically handle them:

Inconsistent key casing: Some APIs return snake_case, others return camelCase. Most converters let you choose your output casing. I always go with camelCase for TypeScript — it's the convention.

Deeply nested arrays: An array of arrays of objects? Yeah, I've seen it. Good converters generate intermediate interfaces for each level.

Mixed-type arrays: [1, "hello", true] — this is rare in practice, but if a converter encounters it, you'll probably get (string | number | boolean)[].

Empty objects: {} with no defined shape. The converter can't infer anything, so you'll get Record<string, any> or something similar.

If you're working with data that needs to go into a different format, say you're building a Go backend that consumes the same API, check out /blog/jsonformatter--json-to-go-struct-online for the Go side of things.

Why You Should Automate This

Look, I get it. When you're learning TypeScript, manually typing interfaces helps you understand the type system. But once you're past that phase, there's zero value in manually transcribing JSON. It's mechanical, repetitive, and error-prone.

The time you spend typing address: Address could be spent actually figuring out what that address field does in your business logic. That's where the real value is.

And if you're working on a project with constantly changing APIs — which is most projects — you'll be regenerating interfaces regularly. Doing that by hand every time is a recipe for bugs.

FAQ

Q: Can I convert JSON to TypeScript interfaces for free?

A: Yes, tools like DevFormatters JSON formatter are completely free. You paste JSON and get TypeScript interfaces instantly.

Q: Does the conversion handle nested objects correctly?

A: Yes. The tool recursively walks through the JSON and generates a separate interface for each nested object, keeping your types clean and composable.

Q: What happens with null values in JSON?

A: Null values typically generate union types like string | null or number | null, depending on the field type.

Q: Can I convert JSON arrays to TypeScript?

A: Yes. Arrays are handled automatically — the converter inspects the first element to determine the array item type and generates the appropriate Array<T> or T[] syntax.

Q: Does it support optional fields with ??

A: Most converters detect fields that are missing from some objects and mark them as optional using the ? modifier.

Q: What about JSDoc comments on generated interfaces?

A: Basic converters skip comments, but you can add them manually after generation. Some advanced tools let you preserve comments if the JSON includes _description fields.

Q: Is there a size limit on the JSON I can paste?

A: Free tools usually handle up to a few hundred KB. For massive JSON files, you might need to split them into chunks.

Q: Can I convert JSON directly from an API endpoint?

A: Most online tools work with pasted content only. You'd copy the response from your API client (like Postman or curl) and paste it in.