Loading OpenAPI to TypeScript Converter...
Please wait a moment

How to Convert OpenAPI to TypeScript - Step by Step Guide

Generate type-safe TypeScript interfaces from any OpenAPI 3.0 or Swagger 2.0 specification

Step 1

Paste Your OpenAPI Specification

Paste your OpenAPI 3.0 or Swagger 2.0 spec in JSON or YAML format. The converter reads all schemas from components/schemas and generates a TypeScript interface or type for each one:

Paste directly: Copy your spec from Swagger Editor, your API gateway, or spec files in your project
Upload a file: Load an openapi.json, swagger.yaml, or .yml file directly from disk
Try the sample: Click "Sample" to load an E-Commerce API spec with Products, Orders, and enums

Example: OpenAPI Spec with Enum and Array Properties

A product schema with an enum, array, and nested $ref:

components:
  schemas:
    Product:
      type: object
      required: [id, name, price]
      properties:
        id: { type: integer }
        name: { type: string }
        price: { type: number }
        currency:
          type: string
          enum: [USD, EUR, GBP]
        tags:
          type: array
          items: { type: string }
Step 2

Auto-Generated TypeScript Interfaces

Each OpenAPI schema is converted to a TypeScript interface with proper types. Optional fields use ?, enums become union literal types, and $ref schemas become typed references:

Interfaces vs types: Object schemas become interface, union/intersection types use type
Optional fields: Any property not in the required array is typed as field?: Type
JSDoc comments: Schema description fields are carried over as JSDoc comments on each property

Example: Generated TypeScript Output

Enum becomes a union type, optional fields get ?, arrays are typed:

// Generated TypeScript interfaces from OpenAPI spec
// E-Commerce API v2.1.0

export interface Product {
  id: number;
  name: string;
  price: number;
  currency?: 'USD' | 'EUR' | 'GBP';
  inStock?: boolean;
  tags?: string[];
  category?: Category;
}

export interface Category {
  id: number;
  name: string;
  parentId?: number;
}
Step 3

Download and Use in Your TypeScript Project

Download as a .ts file and drop it into your project. The interfaces work with any TypeScript HTTP client:

Axios + TypeScript: Use as generic type — axios.get<Product[]>('/products')
React Query: Type your query functions useQuery<Product> for full autocomplete
For full client generation: Use openapi-typescript or Orval for hooks and fetch functions too

What is OpenAPI to TypeScript Conversion?

OpenAPI to TypeScript conversion takes the schema definitions in an OpenAPI 3.0 or Swagger 2.0 spec and generates native TypeScript interfaces and types. This keeps your frontend and backend type contracts in sync — when the API spec changes, regenerating the types catches mismatches at compile time rather than at runtime.

Each OpenAPI object schema becomes a TypeScript interface. Fields listed in the required array are non-optional; all others get the ? modifier. OpenAPI enum arrays become TypeScript union literal types (e.g. 'USD' | 'EUR' | 'GBP'). The allOf, oneOf, and anyOf keywords map to TypeScript intersection (&) and union (|) types.

For production workflows, the popular openapi-typescript npm package generates types from a URL or local file as part of your build pipeline. Orval and swagger-typescript-api go further and generate full typed API client functions. This converter is ideal for quick one-off type generation and exploration. Validate your spec first with our OpenAPI Validator.

Frequently Asked Questions

How are enums handled?

OpenAPI enum arrays are converted to TypeScript union literal types. For example, enum: [USD, EUR, GBP] becomes 'USD' | 'EUR' | 'GBP' — giving you compile-time safety on all allowed values.

Does it support allOf, oneOf, and anyOf?

Yes. allOf becomes a TypeScript intersection type (A & B), oneOf and anyOf become union types (A | B). This matches the semantics described in the OpenAPI polymorphism guide.

How are $ref references resolved?

$ref: '#/components/schemas/User' becomes the TypeScript type name User. Since all schemas in components/schemas are generated as interfaces in the same file, the references resolve automatically when you import the file.

Can I use these types with React Query or SWR?

Yes. Use the interfaces as generic parameters: useQuery<Product[]> with React Query, or useSWR<Product> with SWR. They also work directly with Axios typed generics and the native Fetch API.

What npm packages generate TypeScript from OpenAPI automatically?

openapi-typescript generates types from a URL or file as part of your build. Orval generates typed React Query hooks. swagger-typescript-api creates full API client classes. This converter is ideal for quick exploration before committing to a build-time pipeline.

Does it support Swagger 2.0?

Yes. For Swagger 2.0 specs, schemas are read from the definitions object instead of components/schemas. The conversion logic is identical. Validate your spec first with our OpenAPI Validator to catch any issues.

Is the OpenAPI to TypeScript converter free?

Yes, completely free with no limits on spec size or usage. No registration required. All conversion runs in your browser — your spec never leaves your device.