Vue3+Nuxt中如何初始化空对象数组并赋值？

你遇到的错误是因为TypeScript会把空数组ref([])的类型推断为never[]，导致后续赋值对象数组时类型不兼容。以下是几种靠谱的解决方式：

1. 定义明确的类型接口（推荐） #

先为数组元素定义类型接口，再给ref指定该类型的数组：

// 定义数组元素的类型接口
interface ResultItem {
  name: string;
}

// 初始化空数组并指定类型
const results = ref<ResultItem[]>([]);

// 赋值操作
results.value = [{ name: input.value }];

2. 直接在ref中指定元素类型 #

如果不想单独定义接口，也可以直接在ref里直接声明元素类型：

const results = ref<{ name: string }[]>([]);

results.value = [{ name: input.value }];

3. 关于any[]的说明 #

你尝试的let results: any[] = ref([]);虽然能绕过错误，但会丢失TypeScript的类型检查能力，不推荐在实际项目中使用，因为它会隐藏潜在的类型问题。

另外，Vue官方文档里的示例用的是非空数组，TypeScript可以自动推断出数组元素的类型，而空数组因为没有初始值，需要手动指定类型才能避免类型错误。

内容的提问来源于stack exchange，提问作者Ghassan Barghouti