定义泛型的两种方式

7 篇文章 0 订阅

泛型接口 第一种

interface ConfigFn {
    <T>(value: T): T;
}
var getData: ConfigFn = function <T>(value: T): T {
   return value;
 }
 getData<string>('张三')

泛型接口 第二种

interface ConfigFn<T> {
    (value: T): T;
}
function getData<T>(value: T): T {
    return value;
}
var myGetData: ConfigFn<string> = getData
myGetData('20')


interface dataobj {
  //定义为接口类型,更加详细的定义对象里的每个属性值类型
  leftValue: any[];
  rightValue: number[];
  editLayoutData: any[];
  indexOne: number;
  dialogVisible: boolean;
  confirm: () => any; //确认
  cancelEdit: () => any; //取消修改
  resetReason: () => any; //重置因子
  getObject: (value: any, direction: any, movedKeys: any) => void; //定义为函数类型,入参为any类型:无返参的普通函数
  filterMethod: (query: any, item: any) => boolean;
  //   handle: (item: string) => void;
  //   [propName: string]: any; //该对象还可加入任意属性值类型
}  

let data = reactive({
      dialogVisible: false,
      leftValue: [],
      rightValue: [],
      editLayoutData: [],
      indexOne: 0,
      //搜索
      confirm: () => {
        data.dialogVisible = false;
        console.log("搜索", data.rightValue);
      },
      //搜索
      filterMethod: (query: any, item: any): boolean => {
        return item.label.indexOf(query) > -1;
      },
      //取消修改
      cancelEdit: (): any => {
        data.dialogVisible = false;
        data.leftValue = [];
        data.rightValue = [];
        data.editLayoutData = [];
        data.indexOne = 0;
      },
      //重置因子
      resetReason: (): any => {
        data.leftValue = [];
        data.rightValue = [];
        data.editLayoutData = [];
        data.indexOne = 0;
      },
      // 右侧列表元素变化时触发
      // value右边框里面所有的key值  direction是方向(left和right),movedKeys是移动的key值
      getObject: (value: any, direction: any, movedKeys: any): void => {
        // 判断移动方向
        if (direction === "right") {
          // 找出key值,然后根据key值找到下标,进行对控制删除显示的键进行修改状态
          movedKeys.map((item: number, index: number) => {
            data.editLayoutData.filter((i, k: number) => {
              if (i.id === item) {
                data.indexOne = k;
              }
            });
            // isUsed是删除,未删除的状态
            data.editLayoutData[data.indexOne].isUsed = 0;
          });
        } else {
          movedKeys.map((item: any) => {
            data.editLayoutData.filter((i, k: number) => {
              if (i.id === item) {
                data.indexOne = k;
              }
            });
            data.editLayoutData[data.indexOne].isUsed = 1;
          });
        }
      },
      //请求
      getList: () => {
        console.log("请求", 914326);
      },
    }) as dataobj;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值