TypeScript在vue3中的应用(Ref和ComputedRef的应用)

首先,我承认,我vue3和ts都不是很熟。然后在使用过程中就发现了这样一个情况。

const list: {isBoob: boolean; count: number;}[] = computed(() => {
  let arr: number[] = new Array(total.value).fill(0).fill(1, 0, boobNumber.value) // 初始化数组
  arr = arr.sort((a,b) => Math.random() - 0.5) // 随机排序
  return arr.map((item: number, index): {isBoob: boolean; count: number;} => {
    // 返回对象组成的数组
    return {
      isBoob: !item,
      count: index
    }
  })
})
// error:类型"ComputedRef<{ isBoob: boolean; count: number; }[]>"缺少类型"{ isBoob: boolean; count: number; }[]"的以下属性: length, pop, push, concat 及其他 29 项。

其实现在想来,提示也很明白了,list的类型是ComputedRef<{ isBoob: boolean; count: number; }[]>,但是我当时没搞懂ComputedRef是什么,所以懵住了。

这里介绍vue3的特点,vue3在定义响应式数据时,需要使用x = ref()包裹数据,计算数据需要x = computed()。使用的时候也需要用 x.value。

所以对于变量x来说,他的数据类型一定不是括号内的内容或者说value的类型。

而ts为了应对这种情况就有了Ref和ComputedRef,分别表示这两种响应式数据。

x :Ref<number> = ref(10)

x :ComputedRef<number> = computed(() => x*2)
相关推荐
y先森14 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy14 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891117 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
Jacky(易小天)3 小时前
MongoDB比较查询操作符中英对照表及实例详解
数据库·mongodb·typescript·比较操作符
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js