# yapi2type

**Repository Path**: punch-man/yapi2type

## Basic Information

- **Project Name**: yapi2type
- **Description**: 这是一个用于从 Yapi 生成 TypeScript 接口定义的 Chrome 插件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-01
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Yapi2Type Chrome Extension

这是一个高效的 Chrome 插件，用于将 [Yapi](https://hellosean1025.github.io/yapi/) 接口文档一键生成 TypeScript 接口定义 (Interface)。

它能帮助前端开发者节省大量手动编写 TypeScript 类型定义的时间，提高开发效率。

## ✨ 核心功能

- **一键生成**: 自动解析当前 Yapi 接口页面的 Query、Body (JSON/Form) 和 Response 数据。
- **类型精准**:
  - 支持 **Nested Objects** (嵌套对象)
  - 支持 **Enum** (枚举值转联合类型)
  - 支持 **Array** (复杂数组类型)
  - 自动提取接口注释和字段描述
- **灵活复制**:
  - **一键复制 (全)**: 包含请求和响应的完整定义。
  - **复制请求**: 仅复制 Request Body/Query 定义。
  - **复制响应**: 仅复制 Response Body 定义。
  - **元信息复制**: 点击图标快速复制接口路径或名称。
- **现代化 UI**: 类似 IDE 的代码预览风格，支持深色模式代码高亮。

## 🚀 使用说明

1. **安装插件**:

   - 下载本项目代码。
   - 打开 Chrome 浏览器，访问 `chrome://extensions/`。
   - 开启右上角的 **"开发者模式"**。
   - 点击 **"加载已解压的扩展程序"**，选择本项目根目录。

2. **生成代码**:
   - 登录你的 Yapi 平台。
   - 打开任意一个接口详情页面 (URL 格式通常为 `.../interface/api/{id}`).
   - 点击浏览器右上角的 **Yapi2Type** 插件图标。
   - 点击 **"分析当前页面"** 按钮。
   - 预览生成的代码，点击下方的 **"复制"** 按钮即可使用。

## 🛠️ 项目结构

```text
yapi2type/
├── manifest.json       # 插件核心配置 (Manifest V3)
├── src/
│   ├── popup/          # 弹窗界面及逻辑
│   │   ├── popup.html
│   │   ├── popup.css
│   │   ├── popup.js    # 交互逻辑
│   │   └── generator.js # 核心解析生成逻辑
│   ├── background.js   # Service Worker
│   └── content.js      # Content Script
├── assets/             # 静态资源
└── README.md
```

## 📦 开发与贡献

欢迎提交 Issue 或 Pull Request 来改进这个项目。

### 核心逻辑说明

- `src/popup/popup.js`: 负责解析当前 Tab URL，调用 Yapi API 获取 JSON 数据。
- `src/popup/generator.js`: 负责将 Yapi 的 JSON Schema 递归转换为 TypeScript 字符串。

## 📄 License

MIT