Vue3 Pinia中storeToRefs解构后TypeScript类型异常求助

在Vue3 + Pinia场景下，使用storeToRefs解构store中的状态属性时，出现类型推导错误：原本的Ref<Container[]>类型被错误解析为Container类内部公共字段的类型，导致类型不兼容报错。

代码示例 #

Store定义：

import { Container } from "@/models/Container";

export const useStore = defineStore("containers", () => {
  const containers: Ref<Container[]> = ref([]);
  return { containers };
});

function test() {
  const store = useStore();
  const { containers } = storeToRefs(store);
  // 此处containers类型异常，无法赋值给Ref<Container[]>
  const refContainers: Ref<Container[]> = containers; // 类型报错
}

Container类定义：

export class Container {
  public stat: Ref<Stat>;
  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;  
  private readonly movingAverageStat: Ref<Stat>;

  constructor(
    public readonly id: string,
    public readonly created: Date,
    ...
  ) {
    // 省略实现
  }

  // 省略方法
}

问题原因 #

Pinia的storeToRefs类型推导逻辑会递归解析对象内部的响应式属性，由于Container类存在公共的Ref类型字段stat，TypeScript的结构类型检查会错误地将数组元素的内部Ref属性展开，导致解构后的containers类型被错误推导。

方案1：显式定义Store返回类型 #

通过手动指定store的返回类型，约束TypeScript的类型推导逻辑，避免递归解析内部属性：

import { Ref } from 'vue';
import { Container } from "@/models/Container";

// 显式定义Store的返回类型
interface ContainerStoreState {
  containers: Ref<Container[]>;
}

export const useStore = defineStore("containers", (): ContainerStoreState => {
  const containers: Ref<Container[]> = ref([]);
  return { containers };
});

方案2：使用类型断言强制修正类型 #

在解构时通过类型断言直接指定containers的正确类型：

function test() {
  const store = useStore();
  const { containers } = storeToRefs(store) as { containers: Ref<Container[]> };
  // 此时类型正常
  const refContainers: Ref<Container[]> = containers;
}

方案3：调整Container类的字段访问权限 #

如果业务允许，将Container类中的stat字段改为私有或受保护，避免TypeScript在类型推导时解析该字段：

export class Container {
  private stat: Ref<Stat>; // 改为私有字段
  private readonly throttledStatHistory: UseThrottledRefHistoryReturn<Stat, Stat>;  
  private readonly movingAverageStat: Ref<Stat>;

  // 保留原构造函数和方法
}

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