为组件编写描述文件

2022-01-17  本文已影响0人  被代码耽误的裁缝

为组件编写描述文件d.ts

例如有这样一个函数组件public-component/MyComponent

-MyComponent{
    index.jsx
    style.scss
}

为该组件编写一个index.d.ts描述文件,在使用组件时有api提示

无需其他项目配置

-MyComponent{
    index.jsx
    index.d.ts
    style.scss
}
// index.d.ts
export interface DataItem<T> {
  /**
   * 非必传,状态的统计
   * 
   * 默认:undefined,undefined时不展示括号
   */
  count?: Number | undefined;

  /**
   * 非必传,hover提示语
   */
  tip?: String;
}

export interface Props {
  /**
   * 必传,数据项数组
   */
   data: DataItem[];

  /**
   * 必传,渲染显示字段
   * 
   * 为 string 时,返回 d[string]
   * 
   * 为 function 时,返回函数结果
   */
   renderItem: String | Function;

  /**
   * 必传,选中数据的key值
   */
   value: String;

  /**
   * 必传,数据改变事件
   * 
   * nextValue 即将选中的key
   * 
   * currentValue 当前选中的key
   * 
   * checked 当前项是否被选中 true | false
   * 
   * item 当前被选中的数据项(对象)
   * 
   */
  onChange?: (nextValue: String, currentValue: String, checked: Boolean, item: Object) => void;

  /**
   * 非必传,快速搜素的标题,默认为"快速搜索:"
   */
   title?: String;

  /**
   * 非必传,生成每一项key的辅助方法,默认index
   */
   keygen?: String | Function;

  /**
   * 非必传,单选是否可取消选中,默认true
   */
   canCancel?: Boolean;

}

declare function QsButton(props:Props) {}

export default QsButton;

上一篇下一篇

猜你喜欢

热点阅读