泛型在 vue3.0中与reactive的使用

泛型在 vue3.0中与reactive的使用

RT 最近在学习vue3.0以及TS记录一下在中突然明白过来的坑

遇见场景,我在reactive中的dropdown这个参数默认给一个值为null,当我想在使用过程中给他一个特定的类型.最开始想的是给一个联合类型 number | string | null 显然这样是不正确的 代码如下:

interface Data {
  isShow:boolean,
  dropdown:number | null
}

  setup () {
    const data:Data = reactive({
      isShow: false,
      dropdown: null 
    })
  
    const methods = {
      handleDropDownShow: ():void => {
        data.isShow = !data.isShow
      }
    }
    const toRefsData = toRefs(data)
    return {
      ...toRefsData,
      ...methods
    }
  }

显然这样是不对的 虽然可以通过判断来获取其中的类型,但是如果我这个类型是个其他的呢 string, boolean, HTMLElement…等等类型,这个时候就可以使用泛型来规范参数了

interface Data<T> {
  isShow:boolean,
  dropdown:T | null
}
  setup () {
    const data:Data<HTMLElement> = reactive({
      isShow: false,
      dropdown: null // 当想要快速获取ref的元素的时候,可以直接取这个名字 上面的ref也取这个名字就可以了
    })
    const methods = {
      handleDropDownShow: ():void => {
        data.isShow = !data.isShow
      },
      handleClick (e:MouseEvent) {
        console.log(e)
           // data.dropdown = '123' // error TS2322: Type '"123"' is not assignable to type 'HTMLElement | null'.
        console.log(data.dropdown)
      }
    }
    const toRefsData = toRefs(data)
    return {
      ...toRefsData,
      ...methods
    }
  }