vue 3 typescript中怎么为reactive中的computed定义类型?

Question

1. 如果我在一个reactive中把对象的值设置为computed(顺便问下这么操作是合理的吗)那么请问怎么在typescript中给这个interface定义呢?

import { reactive } from 'vue'
interface ITableCustomFilter {
  name: {
    defaultNameOpts: ??? // 这里如何定义呢 要考虑到在template自动unwrap
  };
}

const tableCustomFilter = reactive<ITableCustomFilter>({
  name: {
    defaultNameOpts: [], //这里初始值又该如何设置呢
  },
});

// 这里是初始化的函数 defaultNameOpts结构是{ label: string; value: string }[]
function initTableFilterData() {
  tableCustomFilter.name.defaultNameOpts = computed(() =>
    tableMainData.value.map((item) => ({
      label: item.name,
      value: item.value,
    }))
  );
}

Answer 1

import { ComputedRef, computed, reactive } from 'vue'

interface ITableCustomFilter {
  name: {
    defaultNameOpts: ComputedRef<{ label: string; value: string }[]>
  };
}

const tableCustomFilter = reactive<ITableCustomFilter>({
  name: {
    defaultNameOpts: computed(() => []),
  },
});

function initTableFilterData() {
  (tableCustomFilter.name.defaultNameOpts as any).value = tableMainData.value.map((item) => ({
    label: item.name,
    value: item.value,
  }));
}

Answer 2

不合理，computed 不应该放在方法里面，并且 computed 是里面管理的对象改变了就会执行

const tableCustomFilter = computed(() => ({
    name: {
        defaultNameOpts: tableMainData.value.map((item) => ({
          label: item.name,
          value: item.value,
        }))
    }
}))

这个类型你也不用定义，ts 会根据 tableMainData.value 自动推导出来