美文网首页
为组件编写描述文件

为组件编写描述文件

作者: 被代码耽误的裁缝 | 来源:发表于2022-01-17 11:24 被阅读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;
    
    

    相关文章

      网友评论

          本文标题:为组件编写描述文件

          本文链接:https://www.haomeiwen.com/subject/nqrchrtx.html