← All Posts

How to Do TypeScript Interface Generation on Claude Code

Claude Code can generate TypeScript interfaces from JSON payloads, REST API responses, database schemas, and existing JavaScript code in seconds. It's one of the highest-value tasks for TypeScript developers: tedious to do by hand, but fast and accurate when delegated to an AI with full codebase context. The main risk is running into a usage limit halfway through a bulk generation job, which is where tools like Usagebar help you stay aware before it's too late.

  • Works on raw JSON, OpenAPI specs, Zod schemas, Prisma models, and plain English descriptions
  • Claude Code can infer optional fields, union types, and nested hierarchies from real data
  • Bulk generation across many files can consume tokens quickly — track your session usage

What is TypeScript interface generation and why use Claude Code for it?

TypeScript interface generation is the process of converting untyped data structures — like a raw API response, a database row, or a JSON config file — into explicit TypeScript interface or type definitions. Doing this manually for dozens of endpoints is repetitive and error-prone.

Claude Code handles this well because it has access to your full project context. It can see existing naming conventions, understand how interfaces relate to one another, and maintain consistency across your codebase rather than generating isolated types in a vacuum.

Unlike standalone tools like Quicktype or json-to-ts, Claude Code can simultaneously generate the interface and wire it into your existing types, update imports, and flag inconsistencies — all in one pass.

How to generate TypeScript interfaces from JSON

The most common use case is converting a JSON API response into a typed interface. Here's the pattern that works reliably:

Step 1: Paste or reference your JSON

You can either paste the raw JSON directly into your prompt or point Claude Code at a file in your project:

Generate a TypeScript interface for this JSON payload:

{
  "id": 42,
  "username": "janedoe",
  "email": "jane@example.com",
  "roles": ["admin", "editor"],
  "profile": {
    "avatarUrl": "https://...",
    "bio": null
  },
  "createdAt": "2024-01-15T10:30:00Z"
}

Step 2: Add naming and placement instructions

Give Claude Code context so it fits your codebase conventions:

Name it `UserResponse`. Use `string | null` for nullable fields and `Date` for timestamps. Place it in `src/types/user.ts` alongside the existing `UserRequest` interface.

Step 3: Request readonly or utility type variants if needed

Claude Code can extend the generation beyond a plain interface:

Also generate a `UserResponsePartial` using `Partial<UserResponse>` and a `CreateUserPayload` that omits `id` and `createdAt`.

Claude Code will produce well-typed, immediately usable definitions and, if you reference the target file, insert them in the right location automatically.

How to generate interfaces from OpenAPI and REST API specs

If your project has an OpenAPI (swagger.json or openapi.yaml) spec, Claude Code can read it directly and generate a full suite of request/response interfaces:

Read openapi.yaml and generate TypeScript interfaces for all response schemas under /users and /orders. Follow the naming convention in src/types/.

This is significantly faster than running a code-gen tool and manually reconciling the output with your existing types. Claude Code will spot naming collisions and shared sub-schemas and consolidate them rather than duplicating types.

For teams using tools like openapi-typescript, Claude Code complements the workflow by letting you make targeted modifications or extend the generated types with business logic constraints.

How to infer interfaces from existing JavaScript code

If you're migrating a JavaScript codebase to TypeScript, Claude Code can infer interfaces by reading how objects are constructed and used at runtime. This pairs well with a broader TypeScript migration workflow on Claude Code.

Look at how `userService.js` constructs and returns user objects. Generate a TypeScript interface that accurately reflects the shape, including any optional fields that aren't always set.

Claude Code will trace variable assignments, function return values, and object spreads to infer the complete shape, including fields that may only appear in certain code paths (typed as optional).

How to generate interfaces from database schemas

If you use Prisma, Drizzle, or plain SQL, Claude Code can convert your schema definitions into TypeScript interfaces for use outside the ORM layer:

Read schema.prisma and generate plain TypeScript interfaces (not Prisma types) for `User`, `Post`, and `Comment` that can be used in API response serializers.

This avoids leaking ORM-specific types (like Prisma.UserGetPayload) into your application layer, keeping your domain types clean and portable.

Useful Claude Code slash commands for interface generation

Claude Code's slash commands can help manage larger interface generation sessions:

  • /clear — reset context between unrelated generation tasks to reduce token overhead
  • /compact — compress conversation history when working through a large OpenAPI spec with many schemas
  • /usage — check your current session token consumption before starting a large bulk generation job

The /usage command is particularly important. TypeScript interface generation from large specs can consume more tokens than you'd expect, especially when Claude Code reads multiple source files for context. Checking before a big job prevents the frustrating experience of a mid-task cutoff.

How to handle complex cases: unions, generics, and discriminated types

Claude Code handles sophisticated TypeScript patterns when you prompt for them explicitly:

Discriminated unions

Generate a discriminated union for this API response that returns either a `SuccessPayload` or `ErrorPayload` based on a `status` field of "ok" | "error".

Generic interfaces

Generate a generic `PaginatedResponse<T>` interface using this JSON structure, where the `data` field changes based on the resource type.

Nested and recursive types

The `children` field in this tree node JSON is an array of the same shape. Generate a recursive TypeScript interface.

These are patterns that automated tools like Quicktype often get wrong or handle clumsily. Claude Code's natural language understanding lets you express intent rather than configure tool options.

Keeping track of token usage during bulk interface generation

Generating interfaces across an entire codebase or a large OpenAPI spec is one of those tasks where you can burn through your Claude usage window without realizing it. Claude Code sessions are governed by usage limits that reset on a 5-hour rolling window, and getting locked out mid-refactor is genuinely disruptive.

You can monitor your current usage with the /usage command in Claude Code, or by visiting claude.ai/settings/usage. For a more persistent view that lives in your macOS menu bar, Usagebar shows your real-time consumption and sends smart alerts at 50%, 75%, and 90% of your limit — so you can finish the current task or save your progress before hitting a wall.

Usagebar also shows exactly when your usage window resets, which helps you plan whether to start a large interface generation job now or wait for a fresh session. It stores your credentials securely in the macOS Keychain and is available on a pay-what-you-want model, including free for students.

Related: How to reduce Claude Code token usage and when does Claude Code usage reset.

Get Usagebar — instant download, flexible pricing, free for students.

Key takeaways

  1. Claude Code generates TypeScript interfaces from JSON, OpenAPI specs, Prisma schemas, and existing JS code with full codebase context
  2. Specify the target file, naming conventions, and utility type variants in your prompt to get production-ready output in one pass
  3. Use /clear between unrelated tasks and /compact for large specs to manage token consumption
  4. Run /usage before starting bulk generation jobs, or use Usagebar to monitor continuously from your menu bar
  5. For discriminated unions, generics, and recursive types, describe your intent in plain language — Claude Code handles the TypeScript syntax

Sources

Track Your Claude Code Usage

Never hit your usage limits unexpectedly. Usagebar lives in your menu bar and shows your 5-hour and weekly limits at a glance.

Get Usagebar