Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Xhs Edith AdapterNew to Visual Studio Code? Get it now.
Xhs Edith Adapter

Xhs Edith Adapter

peterroe

|
30 installs
| (0) | Free
Edith 接口适配器
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

xhs-edith-adapter

Edith 接口生成工具,基于 vscode extension

why

小红书目前内部还没有进行数据服务层的类型统一,结果就是前端接口在类型定义方面出现多种风格

无类型

没有为接口编写出入参数类型

export function getList(payload: any): Promise<any> {
  return get('COMMENT_LIST', { params: payload }, {
    transform: false,
  })
}

写在函数外

同接口定义放在同一个文件中

// 创建
export interface IReviewActivityExtra {
  couponDiscount: number
  couponTotalNum: number
  couponType: number
  spuIds: string[]
}
export interface ICreatePayload {
  name: string
  startTime: number
  reviewActivityExtra: IReviewActivityExtra
}
export function createCommentActivity(payload: ICreatePayload): Promise<any> {
  return post('COMMENT_LIST_CREAT', payload, {
    transform: false,
  })
}

写在函数内:

// 修改、提报笔记
export function submitNote(payload: { subActivityId: string; id: string; noteId?: string }): any {
  return http.post('SUBMIT_NOTE', {
    noteId: payload.noteId
  }, {
    resourceParams: {
      subActivityId: payload.subActivityId,
      id: payload.id
    }
  })
}

定义在单独文件中

这种情况才是理想的

import { IActivityItem, ISubActivity } from '../containers/ActivityRegistration/model'

出现了四种不同风格的写法,而且大部分都是没有定义类型的

原因

虽然 Edith 平台有接口的类型定义,但是不能直接复制粘贴到前端,需要花费大量时间手动添加

核心问题

  • 手动一个个添加类型耗时大,容易出错
  • 风格不统一

常见的方案-命令行工具

阿里的 pont 就是此方案

他们的设计思路大概就是,针对单个项目维护一个符合 swagger 格式的 json 文件

例如:https://petstore.swagger.io/v2/swagger.json

可以看到,这个文件中包含了所有用到的接口,接口的方法以及类型定义

用工具 pont-engine 为项目绑定这个模版地址,然后拉取数据,自动生成所有的接口函数以及类型定义,通过区分模块写入在 services 目录下的不同文件中,暴露给宿主调用

这种方案虽好,但是不太适合我们,原因有几点:

  • 小红书 Edith 强调接口独立性,并没有对项目相关的接口进行整合,改造成本大
  • 对项目有较强侵入性质,对平滑过度不友好

我预想工具的理想状态可能是

  • 非侵入。不需要对源项目添加额外的配置文件
  • 可选。根据个人喜好决定使用,一个开发者使用不会对另一个开发者产生影响
  • 简单。简单易用,最少的操作步骤

于是使用 vscode 插件的形式制作

preview

img

Todo


  • [x] 添加可选类型
  • [x] 添加类型含义注释
  • [x] 添加函数描述
  • [x] 函数参数问题
  • [ ] 名称过长问题?
  • [x] http
  • [x] 接口类型可能没有字段
  • [x] api 冲突
  • [x] 类型导入
  • [x] 注入 API_LIST?
  • [x] 随机名字不规范?
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft