如何在Vue文件中获取Vuex Getter的类型？

当使用mapGetters引入Vuex getter时，默认情况下TypeScript无法自动推导其类型，导致显示为any。以下是无需手动在组件中显式指定类型的解决方案：

1. 提取Getter的类型定义 #

首先在getters.ts中导出getters的类型，让TypeScript能识别所有getter的结构：

// getters.ts
import { GetterTree } from "vuex";
import { RootState } from "./state";

const getters: GetterTree<RootState, RootState> = {
  getTodos: (state: RootState) => state.todos,
};

// 导出getters的类型，供后续类型推导使用
export type RootGetters = typeof getters;
export default getters;

2. 封装类型安全的mapGetters辅助函数 #

创建一个工具函数，基于你的RootGetters类型约束传入的getter名称，并自动推导返回值类型：

// utils/typed-vuex.ts
import { mapGetters } from "vuex";
import type { RootGetters } from "@/store/getters";

// 限制只能传入RootGetters中存在的key，并自动推导每个getter的返回类型
export const mapTypedGetters = <K extends keyof RootGetters>(getterNames: K[]) => {
  return mapGetters(getterNames) as { [Key in K]: ReturnType<RootGetters[Key]> };
};

3. 在Vue组件中使用类型化的辅助函数 #

在组件中替换默认的mapGetters为我们封装的mapTypedGetters，此时getter的类型会被自动推导：

<script setup lang="ts">
import { mapTypedGetters } from "@/utils/typed-vuex";

// getTodos的类型会自动识别为Todo[]，无需手动指定
const { getTodos } = mapTypedGetters(["getTodos"]);
</script>

替代方案：直接在computed中类型推导（不推荐） #

如果不想封装辅助函数，也可以直接在computed中基于RootGetters类型推导，但这种方式需要重复编写逻辑，不够优雅：

<script setup lang="ts">
import { mapGetters } from "vuex";
import type { RootGetters } from "@/store/getters";

const computedProps = {
  ...mapGetters(["getTodos"]),
} as {
  getTodos: ReturnType<RootGetters["getTodos"]>;
};

// 解构后使用
const { getTodos } = computedProps;
</script>

原理说明 #

默认的mapGetters没有绑定到你的自定义getter类型，所以TypeScript无法推断其返回值类型。通过提取RootGetters类型并封装辅助函数，我们让TypeScript能关联到每个getter的具体类型，从而实现自动推导。

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