DEV Community

Mcal
Mcal

Posted on

πŸš€ OpenAPI to TypeScript Converter

#javascript #ai #openapi #typescript

A powerful online tool for quickly converting OpenAPI specifications to TypeScript type definitions and interface declarations.

Online Experience

πŸ“– Project Overview

The OpenAPI to TypeScript Converter is a modern web application built with Vue 3 + TypeScript + Tailwind CSS, specifically designed to parse OpenAPI/Swagger documents and generate high-quality TypeScript code. Whether it's API interface types, data models, or request-response structures, everything can be generated with one click as standard TypeScript definitions.

🎯 Problems Solved

Development Pain Points

  • Manual type definition is time-consuming: Traditional methods require manually writing TypeScript interfaces based on API documentation
  • Type definitions out of sync with API: Frontend type definitions are easily missed when APIs are updated
  • Inconsistent code quality: Type definitions written by different developers have inconsistent styles
  • Repetitive work: Multiple projects need to repeatedly write similar type definitions

Solutions

βœ… Automated generation: One-click conversion of OpenAPI documents to TypeScript code

βœ… Stay synchronized: Generated based on the latest API documentation, ensuring type definitions are always in sync with backend interfaces

βœ… Standardized output: Generate high-quality code that follows TypeScript best practices

βœ… Improved efficiency: Significantly reduce the time cost of manually writing type definitions

✨ Core Features

πŸ”§ Code Generation

  • Complete type support: Supports all data types in OpenAPI 3.0+ specifications
  • Smart interface generation: Automatically generates API interface functions and type definitions
  • Nested type handling: Perfect handling of complex nested objects and array types
  • Enum type conversion: Converts OpenAPI enums to TypeScript union types
  • Optional field recognition: Accurately identifies required and optional fields

πŸ“ Code Quality Optimization

  • Smart comment generation: Automatically extracts title and description from OpenAPI as code comments
  • Naming convention conversion: Supports multiple naming style conversions (camelCase, PascalCase, etc.)
  • Code formatting: Generates well-formatted, readable TypeScript code
  • Deduplication optimization: Automatically removes duplicate type definitions and interface declarations

🎨 User Experience

  • Real-time preview: Real-time generation preview after inputting OpenAPI documents
  • Syntax highlighting: Supports JSON and TypeScript code syntax highlighting
  • One-click copy: Generated code supports one-click copy to clipboard
  • File download: Supports downloading generated code packages
  • Error prompts: Detailed error messages and fix suggestions

πŸ”„ Flexible Configuration

  • Custom options: Supports configuration of generation options (such as whether to include comments, naming styles, etc.)
  • Tag grouping: Automatically groups and generates files by OpenAPI tags
  • Path filtering: Supports selective generation of interfaces for specific paths
  • Type import optimization: Smart handling of type imports and dependencies

πŸ› οΈ Tech Stack

Frontend Framework

  • Vue 3: Uses Composition API for modern development experience
  • TypeScript: Comprehensive type safety guarantee
  • Vite: Ultra-fast development build tool

UI Framework

  • Tailwind CSS: Atomic CSS framework for quickly building beautiful interfaces
  • Responsive design: Perfect adaptation for desktop and mobile

Core Dependencies

  • OpenAPI Parser: Parse OpenAPI/Swagger documents
  • TypeScript Compiler API: Generate high-quality TypeScript code
  • Monaco Editor: Provide professional code editing experience

Development Tools

  • ESLint + Prettier: Code quality and formatting guarantee
  • Husky + lint-staged: Git commit hooks and code checking
  • GitHub Actions: Automated CI/CD pipeline

πŸ“ Project Structure 

vue3-Ts-Tailwind-template-Pro-private/ β”œβ”€β”€ πŸ“ .github/ # GitHub Actions workflows β”‚ └── workflows/ β”‚ └── deploy.yml # Auto deployment configuration β”œβ”€β”€ πŸ“ public/ # Static assets β”‚ └── favicon.ico # Website icon β”œβ”€β”€ πŸ“ src/ # Source code directory β”‚ β”œβ”€β”€ πŸ“ types/ # TypeScript type definitions β”‚ β”‚ └── openapi.d.ts # OpenAPI related types β”‚ β”œβ”€β”€ πŸ“ utils/ # Utility functions β”‚ β”‚ β”œβ”€β”€ typescript-generator.ts # TypeScript code generator β”‚ β”‚ └── openapi-parser.ts # OpenAPI parser β”‚ β”œβ”€β”€ πŸ“ views/ # View components β”‚ β”‚ β”œβ”€β”€ GenerateView.vue # Generate view β”‚ β”‚ └── HomeView.vue # Home view β”‚ β”œβ”€β”€ πŸ“ styles/ # Style files β”‚ β”‚ └── main.css # Main stylesheet β”‚ β”œβ”€β”€ App.vue # Root component β”‚ └── main.ts # Application entry β”œβ”€β”€ πŸ“ template/ # Build output directory β”œβ”€β”€ πŸ“„ package.json # Project dependencies configuration β”œβ”€β”€ πŸ“„ vite.config.ts # Vite configuration β”œβ”€β”€ πŸ“„ tailwind.config.js # Tailwind CSS configuration β”œβ”€β”€ πŸ“„ tsconfig.json # TypeScript configuration β”œβ”€β”€ πŸ“„ .env.* # Environment variables configuration └── πŸ“„ README.md # Project documentation
Enter fullscreen mode Exit fullscreen mode

Core File Descriptions

🎯 Main Components

  • GenerateView.vue: Main interface component with input area and output preview
  • CodeEditor.vue: Code editor with syntax highlighting and formatting
  • FileTree.vue: File tree display, showing generated files grouped by tags

βš™οΈ Core Tools

  • typescript-generator.ts: TypeScript code generation engine
    • generateApiFiles(): Generate API interface files
    • schemaToTypeScript(): Convert OpenAPI Schema to TypeScript types
    • generateFileStructure(): Generate file structure tree
  • openapi-parser.ts: OpenAPI document parser

πŸ”§ Configuration Files

  • vite.config.ts: Build configuration, outputs to template directory
  • tailwind.config.js: UI style configuration
  • .env.production: Production environment variables configuration

πŸš€ Quick Start

Requirements

  • Node.js >= 20.0.0
  • pnpm >= 10.0.0 (recommended)

Install Dependencies 

# Using pnpm (recommended) pnpm install # Or using npm npm install
Enter fullscreen mode Exit fullscreen mode

Development Mode 

# Start development server pnpm dev # Visit http://localhost:5173
Enter fullscreen mode Exit fullscreen mode

Build and Deploy 

# Build production version pnpm build # Preview build result pnpm preview
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Input OpenAPI Document

    • Paste or input OpenAPI JSON/YAML document in the left editor
    • Supports OpenAPI 3.0+ specifications

  2. Configure Generation Options

    • Choose whether to include comments
    • Set naming styles
    • Configure file grouping methods

  3. Generate TypeScript Code

    • Click the "Generate Code" button
    • Preview generated TypeScript code on the right
    • View file tree structure

  4. Export Code

    • Copy individual file contents
    • Download complete code package

🌟 Features

🎨 Modern Interface

  • Responsive design: Perfect adaptation to various screen sizes
  • Dark theme: Eye-friendly dark interface design
  • Intuitive operation: Simple and clear user interaction

⚑ High Performance

  • Real-time generation: Millisecond-level code generation speed
  • Memory optimization: Efficient memory usage and garbage collection
  • Lazy loading: Load components and resources on demand

πŸ”’ Code Quality

  • Type safety: 100% TypeScript coverage
  • Code standards: ESLint + Prettier ensure code quality

🌐 Deployment Friendly

  • Static deployment: Supports GitHub Pages, Vercel, Netlify and other platforms
  • CDN optimization: Resource compression and cache optimization
  • SEO friendly: Good search engine optimization

πŸš€ Deployment

GitHub Pages Auto Deployment

The project has configured GitHub Actions auto deployment workflow:

  1. Push code: Push code to main branch
  2. Auto build: GitHub Actions automatically executes build
  3. Deploy online: Automatically deploy to GitHub Pages after build completion

Manual Deployment 

# 1. Build project pnpm build:prod pnpm build:dev pnpm build:test # 2. Deploy template directory to static server # For example: upload to Nginx, Apache or CDN
Enter fullscreen mode Exit fullscreen mode

Environment Variables Configuration

Production environment requires the following environment variables:

# .env.production VITE_OUTDIR_PATH=template/ VITE_APP_TITLE=OpenAPI to TypeScript Converter
Enter fullscreen mode Exit fullscreen mode

🀝 Contributing

We welcome all forms of contributions!

Development Workflow

  1. Fork the project 
 git clone https://github.com/your-username/vue3-Ts-Tailwind-template-Pro-private.git
Enter fullscreen mode Exit fullscreen mode
  1. Create feature branch 
 git checkout -b feature/your-feature-name
Enter fullscreen mode Exit fullscreen mode
  1. Develop and test 
 pnpm dev # Start development server pnpm test # Run tests pnpm lint # Code check
Enter fullscreen mode Exit fullscreen mode
  1. Commit code 
 git add . git commit -m "feat: add your feature description"
Enter fullscreen mode Exit fullscreen mode
  1. Push and create PR 
 git push origin feature/your-feature-name
Enter fullscreen mode Exit fullscreen mode

Code Standards

  • Follow ESLint and Prettier configuration
  • Write all code in TypeScript
  • Add appropriate comments and documentation
  • Write unit tests covering new features

Commit Message Standards

Use Conventional Commits specification:

  • feat: New features
  • fix: Bug fixes
  • docs: Documentation updates
  • style: Code format adjustments
  • refactor: Code refactoring
  • test: Test related
  • chore: Build or auxiliary tool changes

πŸ“„ License

This project is licensed under the MIT License.

πŸ™ Acknowledgments

Thanks to the following open source projects for their support:

  • Vue.js - Progressive JavaScript framework
  • TypeScript - Superset of JavaScript
  • Tailwind CSS - Utility-first CSS framework
  • Vite - Next generation frontend build tool

πŸ“ž Contact Us

If you have any questions or suggestions, please contact us through:

⭐ If this project helps you, please give us a Star!

πŸ“š Other Language Versions

Top comments (0)