Pinia/TypeScript中Action访问Getter报错：属性不存在

问题代码 #

export const useGameStore = defineStore("game", {
  state: () => gameBaseState,
  getters: {
    foundMarkers(state): Marker[] {
      return state.markers.filter((m) => m.found);
    },
    // ...其他getters
  },
  actions: {
    closeAll() {...},

    nextMissed() {...},

    previousMissed() {...},

    removeFlashId(id: string) {...},

    guess(pos: Coord) {
      // ...逻辑代码

      if (this.foundMarkers.length >= this.toFind) {
        this.setScore();
        this.status = GameStatus.Passed;
      }
    },
  },
});

TypeScript错误提示 #

Property 'foundMarkers' does not exist on type '{ closeAll(): void; nextMissed(): 
void; previousMissed(): void; removeFlashId(id: string): void; flash(text: string, 
type?: string, t?: number): void; loadLevel(levelIndex: any): void; ... 10 more ...; 
guess(pos: Coord): void; } & { ...; } & _StoreWithState<...> & _StoreWithGetters<...> 
& PiniaCustomProperties<...>'.

代码运行正常，但TypeScript无法正确推断getter的类型，即使已经给foundMarkers添加了返回类型标注。

解决方案 #

1. 显式定义State接口并约束gameBaseState类型 #

如果gameBaseState是通过字面量直接创建的，TypeScript可能会推断出过于宽泛或不准确的类型，导致getter和action的类型关联失效。显式定义State接口：

// 先定义State的接口
interface GameState {
  markers: Marker[];
  toFind: number;
  status: GameStatus;
  // 补充其他state属性的定义
}

// 给gameBaseState指定类型
const gameBaseState: GameState = {
  markers: [],
  toFind: 0,
  status: GameStatus.Idle,
  // 初始化其他属性
};

2. 给defineStore指定泛型参数 #

通过显式传入State、Getters、Actions的泛型类型，帮助TypeScript精准推断this的类型：

// 定义Getters接口
interface GameGetters {
  foundMarkers: Marker[];
  // 补充其他getters的类型定义
}

// 定义Actions接口
interface GameActions {
  closeAll: () => void;
  nextMissed: () => void;
  previousMissed: () => void;
  removeFlashId: (id: string) => void;
  guess: (pos: Coord) => void;
  // 补充其他actions的类型定义
}

// 传入泛型参数
export const useGameStore = defineStore<"game", GameState, GameGetters, GameActions>("game", {
  state: () => gameBaseState,
  getters: {
    foundMarkers(state): Marker[] {
      return state.markers.filter((m) => m.found);
    },
    // ...其他getters
  },
  actions: {
    // ...你的action实现
  },
});

3. 检查循环引用问题 #

如果你的Store模块和其他模块（比如Marker、GameStatus的定义模块）存在循环引用，可能会导致TypeScript无法正确解析类型。尝试调整模块导入顺序，或者把共享类型抽离到独立的文件中。

4. 检查TypeScript配置依赖 #

• 确保tsconfig.json中开启了strict模式（"strict": true），这能提升TypeScript的类型推断准确性。
• 确认Pinia和Vue的版本匹配，避免因版本不兼容导致的类型定义问题。

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