Pinia Setup Store中TypeScript状态变量类型注解报错求助

问题原因 #

你给 selectedComponents 直接注解了原始数组类型 ServerConfigComponent[]，但 ref() 会返回一个响应式包装对象（Ref 类型），而非原始数组。Ref<never[]> 和 ServerConfigComponent[] 属于完全不同的类型，因此 TS 会抛出类型不兼容的错误。

解决方案 #

有两种简洁的修正方式：

方式1：给 ref 传入泛型（推荐）

直接通过泛型指定 ref 内部值的类型，TS 会自动推导变量为 Ref<ServerConfigComponent[]>：

export const useComponentsStore = defineStore('components', () => {
  // ...
  const selectedComponents = ref<ServerConfigComponent[]>([]);
  // ...
});

方式2：显式注解变量为 Ref 类型

如果需要明确标注变量类型，要使用 Vue 提供的 Ref 类型：

import type { Ref } from 'vue';

export const useComponentsStore = defineStore('components', () => {
  // ...
  const selectedComponents: Ref<ServerConfigComponent[]> = ref([]);
  // ...
});

关于 Computed 正常工作的说明 #

Computed 本质返回的是 ComputedRef 类型，如果你给它注解的是对应的值类型（比如 ComputedRef<ServerConfigComponent[]>），或者通过泛型 computed<ServerConfigComponent[]>(() => ...) 指定，TS 就能正确匹配类型，所以不会报错——逻辑和 ref 的类型处理一致，只是你之前的写法刚好符合了 Computed 的类型要求。

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