开发者的福音：TinyVue 组件库文档大优化！类型更详细，描述更清晰！-CSDN博客

本文链接：https://blog.csdn.net/kagol/article/details/134842053

你好，我是 Kagol。

前言

从今年2月份开源以来，有不少朋友给我们 TinyVue 组件库提了文档优化的建议，这些建议都非常中肯，我们也在持续对文档进行优化，并且从中总结出了大家对于文档优化的一些共性问题，形成了一份

《组件 demo 和 api 文档编写规范》

为了提升开发者阅读文档的体验，从9月份至今，我们花了整整三个月时间对组件的 demo / api 文档进行全面的优化。

开源不易，请给 TinyVue 点个 Star ⭐ 鼓励下，感谢你对我们 OpenTiny 的大力支持🌹

源码：https://github.com/opentiny/tiny-vue

我们来看下优化前后的对比效果吧。

以 DatePicker 组件为例。

1 组件 API 按照字典顺序排序

优化前组件的 props / events / methods / slots 排列比较乱，没有规律，不方便寻找。

优化后按照字典顺序排列，符合预期，查找方便。

2 更详细的组件 API 类型

优化前组件 props / events 等的类型不够细致，要了解组件的使用方式，还得跳转到 Demo 里面查看代码才知道怎么使用，不太方便，而且 Demo 里面可能没有覆盖到这个 API 的所有用法。

比如 picker-options 这个属性，API 表格里的类型是 Object，具体可以配置什么需要到 Demo 里才知道，而 Demo 里也只显示了 firstDayOfWeek 和 shortcuts 两个配置项的用法，其中的 shortcuts 也只演示了 text 和 onClick 两个配置项的用法。

优化后每个 props / events 都补充了详细的类型定义。

内容不长的，比如 align，就直接写在 API 表格里，'left' | 'center' | 'right'
内容太长的，直接放表格里影响阅读，比如 picker-options，就定义一个类型 IPickerOptions，点击可以直接跳转到具体的类型定义，非常方便

我们来看下 IPickerOptions 的定义。

interface IPickerOptions {
  // 每周的第一天是星期几，默认值是7，也就是星期天
  firstDayOfWeek: number
  // 实现部分禁用，此时只能选择一部分日期
  disabledDate: (time: Date) => boolean
  // 选中日期后执行的回调，需要与 daterange 或 datetimerange 类型配合使用才生效
  onPick: (range: { minDate: Date, maxDate: Date }) => void
  // 快捷选项
  shortcuts: {
    text: string
    onClick: (picker: { $emit: (type: string, date: Date) => void }) => void
    type: 'startFrom' | 'EndAt'
    startDate: Date
    endDate: Date
  }[]
}