如何解决Vuejs组合API的Ref()类型错误？

Question

我正在使用 vue 组合 API 并使用 ref 来表示对象数组，每个对象都有一个 value 属性，似乎打字稿将 ref 的值与每个数组内的属性值混淆了：

正如您在上图中看到的，打字稿告诉我们 arr 的类型是一个包含名称和值的对象数组，但是当我使用 ref 时，它检测到错误的类型。即使我使用如下所示的转换，问题也无法解决：

const arr2 = ref(arr as { name: string; value: number }[]);

但是当我将 value 属性更改为 value2 或其他值时，它将起作用：

更新：

这是我今天遇到的另一个问题：

我想知道我应该如何解决这种类型错误？

Answer 1

很遗憾您使用图像来显示您的代码，因为我必须再次重新输入它。

是的，很明显，在对象中使用“值”作为键会使 Typescript 感到困惑。您可以通过声明一个接口来绕过它，然后您也可以使用该接口来声明arr2

    interface thing {
        name: string,
        value: number
    };

    const arr: thing[] = [
        {name: "x1", value: 1},
        {name: "x2", value: 2}
    ];

    const arr2: Ref<thing[]> = ref(arr);

    arr2.value.forEach(item => console.log(item.name + ':' + item.value));

然而，解决这个问题的最佳方法显然是不要使用“值”作为对象中的键，因为它可能是 Javascript 和/或 Typescript 中的保留字。