老师请问下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(...) 也能获得完全正确的类型

张轩

hy_wang

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

2021-03-05

共3条回复

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

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

3074 学习 · 2253 问题

查看课程

相似问题

请问下老师这里为什么会报错

回答 4