带有TypeScript的Vuex地图函数 [英] Vuex map functions with TypeScript

问题描述

我有一个用于我的状态(游戏命名空间)的接口，如下所示：

interface GameState {
  selectedTab: number;
  timeout: number;
  snackbar: boolean;
  text: string;
  doneTasks: number;
  taskTypes: TaskType[];
  stages: Stage[];
}

我正在尝试使用mapState在组件内映射"taskTypes"，如下所示：

...mapState('game', {
  taskTypes: (state: GameState): TaskType[] => state.taskTypes,
}),

我得到以下错误：类型为‘{taskTypes：(state：GameState)=>；TaskType[]；}’的参数无法分配给类型为‘string[]’的参数。&q；

将函数的"；state"；参数类型定义为‘any’时，它会编译并运行，因此我尝试调试DevTools中的那个函数，看看"；state"；参数包含什么，它保存我的游戏状态，它具有在GameState接口中定义的完全相同的道具。

有没有人知道为什么ts不让我用正确的类型定义"；state"；参数(这就是首先定义接口并避免‘any’的全部目的)

这也不起作用：

...mapState({
  taskTypes: ({ state }: Store<GameState>): TaskType[] => state.taskTypes,
}),

有没有人遇到过这样的问题？有没有什么好办法来处理这个问题？

适用于mapActions等.

更新 我尝试为我的存储和模块提供更好的类型。目前，它们如下所示： 主商店：

export default new Store<RootState>({
  modules: {
    users,
    game,
  },
});

RootState为：

export interface RootState {
  game: GameState;
  users: UserState;
}

游戏模块：

type GameActionContext = ActionContext<GameState, RootState>;

const gameModule: Module<GameState, RootState> = {
  namespaced: true,
  state: {
    selectedTab: 0,
    timeout: 5000,
    snackbar: false,
    text: '',
    doneTasks: 0,
    taskTypes: [...],
    stages: [...],
  } as GameState,
  mutations: {/*Mutations*/} as MutationTree<GameState>,
  actions: {/*Actions*/} as ActionTree<GameState, RootState>,
};

export default gameModule;

我正在尝试按照以下方式映射状态：

...mapState({
      taskTypes: (state): TaskType[] => state.GameState.taskTypes
})

但我收到错误：

(参数)状态：UNKNOWN-对象的类型为‘UNKNOWN’

推荐答案

发布我到目前为止想出的最佳解决方案(就代码最少和键入的代码而言)：

...mapState({
  taskTypes: (state): TaskType[] => (state as RootState).game.taskTypes,
}),

因为state将始终等于RootState，所以对于每个mapState，强制转换将始终保持相同。我不能说我对这个解决方案完全满意，但就目前而言，它似乎是最好的(不需要任何额外的接口/长行的造型类型)

这篇关于带有TypeScript的Vuex地图函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！