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

Todo

• [x] 添加可选类型
• [x] 添加类型含义注释
• [x] 添加函数描述
• [x] 函数参数问题
• [ ] 名称过长问题？
• [x] http
• [x] 接口类型可能没有字段
• [x] api 冲突
• [x] 类型导入
• [x] 注入 API_LIST?
• [x] 随机名字不规范？