🚀 Chuyển đổi OpenAPI sang TypeScript

Công cụ trực tuyến mạnh mẽ giúp chuyển đổi nhanh chóng các thông số OpenAPI thành định nghĩa kiểu TypeScript và khai báo giao diện.

🌐 Trải Nghiệm Trực Tuyến

Công cụ trực tuyến: Chuyển đổi OpenAPI sang TypeScript

📖 Tổng Quan Dự Án

Chuyển đổi OpenAPI sang TypeScript là một ứng dụng web hiện đại được xây dựng bằng Vue 3, TypeScript và Tailwind CSS, đặc biệt được thiết kế để phân tích tài liệu OpenAPI/Swagger và tạo ra mã TypeScript chất lượng cao. Dù là các kiểu giao diện API, mô hình dữ liệu hay cấu trúc yêu cầu-phản hồi, mọi thứ đều có thể được tạo ra chỉ với một cú nhấp chuột dưới dạng định nghĩa TypeScript chuẩn.

🎯 Các Vấn Đề Được Giải Quyết

Những Điểm Đau Trong Phát Triển

Việc định nghĩa kiểu thủ công tốn thời gian: Các phương pháp truyền thống yêu cầu viết thủ công các giao diện TypeScript dựa trên tài liệu API.
Các định nghĩa kiểu không đồng bộ với API: Các định nghĩa kiểu phía frontend thường bị bỏ lỡ khi API được cập nhật.
Chất lượng mã không đồng nhất: Các định nghĩa kiểu được viết bởi các lập trình viên khác nhau có phong cách không nhất quán.
Công việc lặp đi lặp lại: Nhiều dự án cần viết lại các định nghĩa kiểu tương tự.

Giải Pháp

✅ Tạo mã tự động: Chuyển đổi tài liệu OpenAPI thành mã TypeScript chỉ với một cú nhấp chuột.

✅ Giữ đồng bộ: Tạo ra mã dựa trên tài liệu API mới nhất, đảm bảo các định nghĩa kiểu luôn đồng bộ với giao diện backend.

✅ Đầu ra chuẩn hóa: Tạo ra mã chất lượng cao tuân theo các thực tiễn tốt nhất của TypeScript.

✅ Cải thiện hiệu suất: Giảm thiểu thời gian chi phí viết các định nghĩa kiểu thủ công.

✨ Tính Năng Chính

🔧 Tạo Mã

Hỗ trợ kiểu hoàn chỉnh: Hỗ trợ tất cả các kiểu dữ liệu trong thông số OpenAPI 3.0+.
Tạo giao diện thông minh: Tự động tạo ra các hàm giao diện API và định nghĩa kiểu.
Xử lý kiểu lồng nhau: Xử lý hoàn hảo các đối tượng lồng nhau phức tạp và kiểu mảng.
Chuyển đổi kiểu Enum: Chuyển đổi các enum OpenAPI thành các kiểu union TypeScript.
Nhận diện trường tùy chọn: Nhận diện chính xác các trường yêu cầu và tùy chọn.

📝 Tối Ưu Chất Lượng Mã

Tạo chú thích thông minh: Tự động trích xuất tiêu đề và mô tả từ OpenAPI thành chú thích mã.
Chuyển đổi quy tắc đặt tên: Hỗ trợ chuyển đổi nhiều kiểu quy tắc đặt tên (camelCase, PascalCase, v.v.).
Định dạng mã: Tạo ra mã TypeScript được định dạng tốt, dễ đọc.
Tối ưu hóa loại trùng lặp: Tự động loại bỏ các định nghĩa kiểu và khai báo giao diện trùng lặp.

🎨 Trải Nghiệm Người Dùng

Xem trước theo thời gian thực: Xem trước kết quả ngay lập tức sau khi nhập tài liệu OpenAPI.
Đánh dấu cú pháp: Hỗ trợ đánh dấu cú pháp cho mã JSON và TypeScript.
Sao chép một cú nhấp chuột: Mã được tạo ra có thể sao chép chỉ với một cú nhấp chuột.
Tải xuống tệp: Hỗ trợ tải xuống các gói mã đã tạo.
Thông báo lỗi: Cung cấp thông báo lỗi chi tiết và gợi ý sửa lỗi.

🔄 Cấu Hình Linh Hoạt

Tùy chọn tùy chỉnh: Hỗ trợ cấu hình các tùy chọn tạo mã (như có bao gồm chú thích, kiểu đặt tên, v.v.).
Nhóm thẻ: Tự động nhóm và tạo ra các tệp theo thẻ OpenAPI.
Lọc đường dẫn: Hỗ trợ tạo có chọn lọc các giao diện cho các đường dẫn cụ thể.
Tối ưu hóa nhập loại: Xử lý thông minh các nhập loại và phụ thuộc.

🛠️ Công Nghệ Sử Dụng

Khung Frontend

Vue 3: Sử dụng Composition API cho trải nghiệm phát triển hiện đại.
TypeScript: Đảm bảo độ an toàn kiểu hoàn chỉnh.
Vite: Công cụ xây dựng phát triển siêu nhanh.

Khung UI

Tailwind CSS: Khung CSS nguyên tử để nhanh chóng xây dựng giao diện đẹp.
Thiết kế phản hồi: Thích ứng hoàn hảo cho cả máy tính để bàn và di động.

Các Thư Viện Chính

OpenAPI Parser: Phân tích tài liệu OpenAPI/Swagger.
TypeScript Compiler API: Tạo mã TypeScript chất lượng cao.
Monaco Editor: Cung cấp trải nghiệm chỉnh sửa mã chuyên nghiệp.

Công Cụ Phát Triển

ESLint + Prettier: Đảm bảo chất lượng và định dạng mã.
Husky + lint-staged: Hooks kiểm tra mã trong Git.
GitHub Actions: Pipeline CI/CD tự động.

📁 Cấu Trúc Dự Án

Copy

vue3-Ts-Tailwind-template-Pro-private/
├── 📁 .github/                    # Workflow GitHub Actions
│   └── workflows/
│       └── deploy.yml             # Cấu hình tự động triển khai
├── 📁 public/                     # Tài nguyên tĩnh
│   └── favicon.ico               # Biểu tượng trang web
├── 📁 src/                       # Thư mục mã nguồn
│   ├── 📁 types/                 # Định nghĩa kiểu TypeScript
│   │   └── openapi.d.ts          # Các kiểu liên quan đến OpenAPI
│   ├── 📁 utils/                 # Hàm tiện ích
│   │   ├── typescript-generator.ts # Trình tạo mã TypeScript
│   │   └── openapi-parser.ts     # Trình phân tích OpenAPI
│   ├── 📁 views/                 # Thành phần giao diện
│   │   ├── GenerateView.vue      # Giao diện tạo mã
│   │   └── HomeView.vue          # Giao diện chính
│   ├── 📁 styles/                # Tệp kiểu
│   │   └── main.css              # Tệp kiểu chính
│   ├── App.vue                   # Thành phần gốc
│   └── main.ts                   # Điểm vào của ứng dụng
├── 📁 template/                  # Thư mục đầu ra xây dựng
├── 📄 package.json               # Cấu hình phụ thuộc dự án
├── 📄 vite.config.ts             # Cấu hình Vite
├── 📄 tailwind.config.js         # Cấu hình Tailwind CSS
├── 📄 tsconfig.json              # Cấu hình TypeScript
├── 📄 .env.*                     # Cấu hình biến môi trường
└── 📄 README.md                  # Tài liệu dự án

Mô Tả Các Tệp Chính

🎯 Các Thành Phần Chính

GenerateView.vue: Thành phần giao diện chính với khu vực nhập và xem trước đầu ra.
CodeEditor.vue: Trình chỉnh sửa mã với đánh dấu cú pháp và định dạng.
FileTree.vue: Hiển thị cây tệp, cho thấy các tệp được tạo nhóm theo thẻ.

⚙️ Các Công Cụ Chính

typescript-generator.ts: Công cụ tạo mã TypeScript
- generateApiFiles(): Tạo tệp giao diện API
- schemaToTypeScript(): Chuyển đổi Schema OpenAPI thành các kiểu TypeScript.
- generateFileStructure(): Tạo cây cấu trúc tệp.
openapi-parser.ts: Trình phân tích tài liệu OpenAPI.

🔧 Các Tệp Cấu Hình

vite.config.ts: Cấu hình xây dựng, xuất ra thư mục template.
tailwind.config.js: Cấu hình kiểu giao diện.
.env.production: Cấu hình biến môi trường cho sản xuất.

🚀 Khởi Động Nhanh

Yêu Cầu

Node.js >= 20.0.0
pnpm >= 10.0.0 (được khuyến nghị)

Cài Đặt Các Phụ Thuộc

Copy

# Sử dụng pnpm (được khuyến nghị)
pnpm install

# Hoặc sử dụng npm
npm install

Chế Độ Phát Triển

Copy

# Khởi động máy chủ phát triển
pnpm dev

# Truy cập http://localhost:5173

Xây Dựng và Triển Khai

Copy

# Xây dựng phiên bản sản xuất
pnpm build

# Xem trước kết quả xây dựng
pnpm preview

Cách Sử Dụng

Nhập Tài Liệu OpenAPI
- Dán hoặc nhập tài liệu OpenAPI JSON/YAML vào trình chỉnh sửa bên trái.
- Hỗ trợ các thông số OpenAPI 3.0+.
Cấu Hình Tùy Chọn Tạo Mã
- Chọn xem có bao gồm chú thích hay không.
- Đặt kiểu đặt tên.
- Cấu hình phương pháp nhóm tệp.
Tạo Mã TypeScript
- Nhấn nút "Tạo Mã".
- Xem trước mã TypeScript được tạo ra bên phải.
- Xem cấu trúc cây tệp.
Xuất Mã
- Sao chép nội dung tệp cá nhân.
- Tải xuống gói mã hoàn chỉnh.

🌟 Tính Năng

🎨 Giao Diện Hiện Đại

Thiết kế phản hồi: Thích ứng hoàn hảo với các kích thước màn hình khác nhau.
Chủ đề tối: Thiết kế giao diện tối giúp dễ nhìn.
Hoạt động trực quan: Tương tác người dùng đơn giản và rõ ràng.

⚡ Hiệu Suất Cao

Tạo mã theo thời gian thực: Tốc độ tạo mã ở mức mili giây.
Tối ưu hóa bộ nhớ: Sử dụng bộ nhớ hiệu quả và thu gom rác thông minh.
Tải lười: Tải các thành phần và tài nguyên khi cần.

🔒 Chất Lượng Mã

An toàn kiểu: Đảm bảo 100% độ bao phủ TypeScript.
Tiêu chuẩn mã: ESLint + Prettier đảm bảo chất lượng mã.

🌐 Thân Thiện Với Triển Khai

Triển khai tĩnh: Hỗ trợ GitHub Pages, Vercel, Netlify và các nền tảng khác.
Tối ưu hóa CDN: Nén tài nguyên và tối ưu hóa bộ nhớ cache.
Thân thiện với SEO: Tối ưu hóa cho công cụ tìm kiếm.

🚀 Triển Khai

Triển Khai Tự Động Trên GitHub Pages

Dự án đã cấu hình workflow tự động triển khai GitHub Actions:

Đẩy mã: Đẩy mã lên nhánh main.
Tự động xây dựng: GitHub Actions tự động thực hiện xây dựng.
Triển khai trực tuyến: Tự động triển khai lên GitHub Pages sau khi hoàn tất xây dựng.

Triển Khai Thủ Công

Copy

# 1. Xây dựng dự án
pnpm build:prod
pnpm build:dev
pnpm build:test

# 2. Triển khai thư mục template lên máy chủ tĩnh.
# Ví dụ: tải lên Nginx, Apache hoặc CDN.

Cấu Hình Biến Môi Trường

Môi trường sản xuất yêu cầu các biến môi trường sau:

Copy

# .env.production
VITE_OUTDIR_PATH=template/
VITE_APP_TITLE=Chuyển đổi OpenAPI sang TypeScript

🤝 Đóng Góp

Chúng tôi hoan nghênh tất cả các hình thức đóng góp!

Quy Trình Phát Triển

Fork dự án

Copy

   git clone https://github.com/your-username/vue3-Ts-Tailwind-template-Pro-private.git

Tạo nhánh tính năng

Copy

   git checkout -b feature/your-feature-name

Phát triển và kiểm tra

Copy

   pnpm dev        # Khởi động máy chủ phát triển
   pnpm test       # Chạy các bài kiểm tra
   pnpm lint       # Kiểm tra mã

Cam kết mã

Copy

   git add .
   git commit -m "feat: thêm mô tả tính năng của bạn"

Đẩy và tạo PR

Copy

   git push origin feature/your-feature-name

Tiêu Chuẩn Mã

Tuân thủ cấu hình ESLint và Prettier.
Viết tất cả mã bằng TypeScript.
Thêm chú thích và tài liệu phù hợp.
Viết các bài kiểm tra đơn vị bao phủ các tính năng mới.

Tiêu Chuẩn Tin Nhắn Cam Kết

Sử dụng tiêu chuẩn Conventional Commits:

feat: Tính năng mới.
fix: Sửa lỗi.
docs: Cập nhật tài liệu.
style: Điều chỉnh định dạng mã.
refactor: Tái cấu trúc mã.
test: Liên quan đến kiểm tra.
chore: Thay đổi công cụ xây dựng hoặc phụ trợ.

📄 Giấy Phép

Dự án này được cấp phép theo Giấy phép MIT.

🙏 Cảm Ơn

Cảm ơn các dự án mã nguồn mở sau đây đã hỗ trợ:

Vue.js - Khung JavaScript tiến bộ.
TypeScript - Superset của JavaScript.
Tailwind CSS - Khung CSS hướng tiện ích.
Vite - Công cụ xây dựng frontend thế hệ tiếp theo.

📞 Liên Hệ Chúng Tôi

Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, vui lòng liên hệ với chúng tôi qua:

📧 Gửi vấn đề.
💬 Bắt đầu thảo luận.

⭐ Nếu dự án này hữu ích cho bạn, hãy cho chúng tôi một sao nhé!

📚 Phiên Bản Ngôn Ngữ Khác

中文版本 (Tiếng Trung)
日本語版 (Tiếng Nhật)

🚀 Chuyển đổi OpenAPI sang TypeScript nhanh chóng

🚀 Chuyển đổi OpenAPI sang TypeScript

🌐 Trải Nghiệm Trực Tuyến

📖 Tổng Quan Dự Án

🎯 Các Vấn Đề Được Giải Quyết

Những Điểm Đau Trong Phát Triển

Giải Pháp

✨ Tính Năng Chính

🔧 Tạo Mã

📝 Tối Ưu Chất Lượng Mã

🎨 Trải Nghiệm Người Dùng

🔄 Cấu Hình Linh Hoạt

🛠️ Công Nghệ Sử Dụng

Khung Frontend

Khung UI

Các Thư Viện Chính

Công Cụ Phát Triển

📁 Cấu Trúc Dự Án

Mô Tả Các Tệp Chính

🎯 Các Thành Phần Chính

⚙️ Các Công Cụ Chính

🔧 Các Tệp Cấu Hình

🚀 Khởi Động Nhanh

Yêu Cầu

Cài Đặt Các Phụ Thuộc

Chế Độ Phát Triển

Xây Dựng và Triển Khai

Cách Sử Dụng

🌟 Tính Năng

🎨 Giao Diện Hiện Đại

⚡ Hiệu Suất Cao

🔒 Chất Lượng Mã

🌐 Thân Thiện Với Triển Khai

🚀 Triển Khai

Triển Khai Tự Động Trên GitHub Pages

Triển Khai Thủ Công

Cấu Hình Biến Môi Trường

🤝 Đóng Góp

Quy Trình Phát Triển

Tiêu Chuẩn Mã

Tiêu Chuẩn Tin Nhắn Cam Kết

📄 Giấy Phép

🙏 Cảm Ơn

📞 Liên Hệ Chúng Tôi

📚 Phiên Bản Ngôn Ngữ Khác

Bình luận