vue，函数返回reactive对象，返回类型应该如何申明？

Question

网上大部分是关于直接赋值的方法。
如：

interface Data {
  name: number
}

const data: Data = reactive({
  name: 1
})

这段代码运行确实不会报错，data的类型就是Data

但是，我想要实现如：

const renderData =() => {
  return reactive({
    name: 1
  })
}

这个时候不管是这样：

const renderData =(): Data => {
  return reactive({
    name: 1
  })
}

还是这样：

const renderData: Data =() => {
  return reactive({
    name: 1
  })
}

加类型都会报错，猪脑过载了，求指教。

Answer 1

按照 Vue 官方文档为 reactive() 标注类型的描述，确实应该如此声明类型：

interface Data {
  name: number;
}

const data: Data = reactive({
  name: 1
});

函数返回 reactive 的话，应该如下声明：

const renderData = (): Data => {
  return reactive({
    name: 1
  });
};

如果报错可能是 IDE 没有识别，可以尝试更新 IDE 的 Vue 插件版本，或者是手动指定泛型：

const renderData = (): Data => {
  return reactive<Data>({
    name: 1
  });
};

不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。