老师请问下ref报错

Question

老师你好，请问一下我这个代码为什么会报错。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
    };
  },
});

Answer 1

张轩 2021-03-04 21:27:58

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

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

• 提问者 hy_wang #1

  非常感谢！

• 提问者 hy_wang #2

  可是老师当使用你那样的写法的时候，提示找不到Ref这个内置类型。。我尝试变成这样才可以`const data = ref<DataProps>(...)`请问下老师这是为什么

• 张轩 回复 提问者 hy_wang #3

  Ref 是个 vue 这个外部模块提供的类型，假如你找到说明模块安装的有可能有问题。