Vuex map 功能与 TypeScript

Question

我的 state（游戏命名空间）的接口如下所示：

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

我正在尝试使用 mapState 在组件内 map 'taskTypes' ，如下所示：

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

我收到以下错误“'{ taskTypes: (state: GameState) => TaskType[]; }' 类型的参数不可分配给'string[]' 类型的参数。”

when defining the "state" parameter type of the function as 'any' it compiles and works, so i tried to "debug" that function in devtools and see what the "state" param holds, and it holds my game state, which has在 GameState 接口中定义的确切道具。

有谁知道为什么 ts 不允许我用正确的类型定义“状态”参数（这是首先定义接口并避免“任何”的全部目的）

这也不起作用：

...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;

我正在尝试通过以下方式向 map 发送 state 对象：

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

但我收到错误：

（参数）state：未知 - Object 属于“未知”类型

Answer 1

发布迄今为止我想出的最佳解决方案（就最少的代码和键入的代码而言）：

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

因为 state 将始终等于 RootState，因此每个 mapState 的投射将始终保持不变。 不能说我对这个解决方案完全满意，但现在它似乎是最好的一个（不需要任何额外的接口/长线铸造类型）

Answer 2

我通常不得不将对象转换为未知类型，然后转换为实际类型。

您可以尝试这种方法，创建一个像这样的泛型类型，基本上可以将值作为函数提供：

export type Computed<T> = {
    [K in keyof T]: () => T[K];
};

现在您可以在这样的组件中使用它：

...((mapState('auth', ['taskTypes']) as unknown) as Pick<Computed<GameState>, 'taskTypes'>)

现在应该输入this.taskTypes 。

Answer 3

您可以将泛型类型传递给mapState 。

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

Answer 4

我在 mapGetters 上收到了相同的错误消息，我设法在 Vue2 组件中正确键入它是这样的：

...(mapGetters("module", ['someGetter']) as {someGetter: () => boolean}),
...(mapState("appModule", ["appIsLoading"]) as {appIsLoading: () => boolean;}),
...(mapMutations("appModule", ["SET_APP_IS_LOADING"]) as {SET_APP_IS_LOADING: (payload: boolean) => void;}),
...(mapActions("appModule", ["extendLockTime"]) as {extendLockTime: () => void;}),

使用这种类型提示和类型检查在组件内部是正确的。