老师请问下ref报错

来源:3-8 更近一步 - reactive

hy_wang

2021-03-04

老师你好,请问一下我这个代码为什么会报错。ref中不可以使用对象吗

import { defineComponent, ref, toRefs,reactive, computed } from "vue";

interface DataProps {
  count: number;
  increase: () => void;
  double: number;
}

export default defineComponent({
  name: "Home",
  setup() {
    // reactive
    const data: DataProps = ref({
      count: 0,
      increase: () => {
        data.count++;
      },
      double: computed(() => {
        return data.count * 2;
      }),
    });
    return {
      data
    };
  },
});
写回答

1回答

张轩

2021-03-04

同学你好 ref 返回的不是 DataProps 属性,ref 返回的对象 上面的 value 属性才是 DataProps 属性。所以这里应该这样写

import { defineComponent, ref, Ref } from 'vue';
// 注意这里是大写的 代表 Ref 类型,是 ref函数调用返回的类型
const data: Ref<DataProps> = ref(...)
这样写就正确了。
当然这个类型指定是多余的,因为 ref 函数可以正确的类型推论
const data = ref(...) 也能获得完全正确的类型


0
3
张轩
回复
hy_wang
Ref 是个 vue 这个外部模块提供的类型,假如你找到说明模块安装的有可能有问题。
2021-03-05
共3条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程