使用Trae开发一个自动生成TS类型定义的vite插件

前言

作为一个前端开发，你是否也经常遇到这样的烦恼：

对接后端API时，需要手动编写大量TypeScript类型定义
API接口变更时，又要手动同步更新类型定义
调试时因为类型不匹配而浪费大量时间

这两天我用Trae开发了一个Vite插件------vite-plugin-auto-api-types，它能自动帮我从API响应生成TypeScript类型定义，彻底解决了这些痛点！今天就来和大家分享一下这个插件

一、什么是vite-plugin-auto-api-types？

vite-plugin-auto-api-types它能在开发过程中自动捕获API请求和响应，然后根据响应数据结构生成TypeScript类型定义文件。

简单来说，你只需要正常调用API，插件就会自动帮你生成对应的类型定义，再也不用手动写那些繁琐的interface了！

二、快速上手

1. 安装插件

bash 复制代码

# 使用npm
npm install vite-plugin-auto-api-types -D

# 使用yarn
yarn add vite-plugin-auto-api-types -D

# 使用pnpm
pnpm add vite-plugin-auto-api-types -D

2. 配置插件

在vite.config.ts中添加插件配置：

typescript 复制代码

import { defineConfig } from 'vite'
import AutoApiTypes from 'vite-plugin-auto-api-types'

export default defineConfig({
  plugins: [
    AutoApiTypes({
      // 配置项
      outputDir: 'src/types',  // 类型文件输出目录
      cacheSize: 100,         // 缓存大小
      moduleMap: {
        // 按URL前缀分组生成模块化类型文件
        '/api/user': 'users',
        '/api/product': 'products'
      },
      typeNameGenerator: (url) => {
        // 自定义类型名称生成规则
        return url.replace(/\/|\./g, '_')
      }
    })
  ]
})

3. 使用插件

配置完成后，只需要正常发起API请求，插件就会自动生成类型定义文件：

typescript 复制代码

// 发起API请求
fetch('/api/user/list')
  .then(res => res.json())
  .then((data: api_user_list) => {
    // 插件会自动根据data的结构生成类型定义
    console.log(data)
  })

三、核心特性

1. 自动类型生成

插件会自动捕获所有API响应，并根据响应数据结构生成对应的TypeScript类型定义。支持各种复杂的数据结构，包括嵌套对象、数组、树形结构等。

2. 模块化类型文件

可以根据URL前缀将API类型分组到不同的模块文件中，保持类型定义的整洁和可维护性：

typescript 复制代码

// vite.config.ts
AutoApiTypes({
  moduleMap: {
    '/api/user': 'users',
    '/api/product': 'products',
    '/api/order': 'orders'
  }
})

这样配置后，插件会生成三个类型文件：users.d.ts、products.d.ts和orders.d.ts。

3. 树形结构类型支持

插件特别优化了对树形结构数据的支持，会自动生成清晰的节点类型定义：

typescript 复制代码

// 自动生成的树形结构类型
export interface MenuTreeNode {
  id: number;
  name: string;
  path: string;
  children?: MenuTreeNode[];
}

export interface GetMenuListResponse {
  code: number;
  message: string;
  data: MenuTreeNode[];
}

4. 自定义响应路径

支持从API响应中提取特定部分生成类型定义：

typescript 复制代码

// vite.config.ts
AutoApiTypes({
  responsePath: 'data.list'  // 只从响应的data.list部分生成类型
})

5. LRU缓存机制

内置LRU缓存机制，优化内存使用，避免重复生成相同的类型定义：

typescript 复制代码

// vite.config.ts
AutoApiTypes({
  cacheSize: 100  // 设置缓存大小为100
})

四、实际应用体验

1. 开发效率提升

以前对接一个API，需要先看文档，然后手动编写类型定义，至少需要10分钟。现在只需要调用一次API，插件就会自动生成类型定义，不到1分钟就能搞定！

2. 类型准确性提高

手动编写类型定义很容易出错，特别是对于复杂的数据结构。现在由插件自动生成，完全基于实际API响应，类型准确性100%！

3. 接口变更自动同步

当后端API接口变更时，只需要重新调用一次API，插件就会自动更新类型定义，再也不用手动同步了！

五、总结

vite-plugin-auto-api-types是一个非常实用的Vite插件，它能帮你自动生成API类型定义，大大提升开发效率。主要优势包括：

自动生成：无需手动编写类型定义
准确可靠：基于实际API响应生成，类型准确
智能优化：支持树形结构、模块化、缓存等高级特性
易于配置：提供丰富的配置项，满足各种需求

最后的话

感兴趣的同学可以去GitHub 查看源码

也可以直接在npm上安装使用：

bash 复制代码

npm install vite-plugin-auto-api-types -D