Vue3+TypeScript中Pinia的useStore返回any，如何实现类型安全？

我正在Vue3和TypeScript环境下使用Pinia，尝试了多种为Store添加类型定义的方式，但始终无法让useStore()的返回类型摆脱any，无法获得类型安全保障。

Store实现代码：

import { defineStore } from "pinia";
import type { DataT } from "@/types";

interface DataStore {
  data: DataT[];
}

export const useDataStore = defineStore("dataStore", {
  state: (): DataStore => ({
    data: [] as DataT[],
  }),
});

组件导入示例（使用<script lang="ts" setup>语法）：

<script lang="ts" setup>
// some other imports
import { useDataStore } from "../../store/data";

const dataStore = useDataStore();
// other code follows
</script>

其他TS类型可正常使用，但useDataStore()的返回类型始终为any，请问如何让Store获得类型安全？

解决方法 #

1. 确保Pinia在项目中正确配置 #

检查main.ts中是否正确创建并挂载Pinia实例，这是类型推导的基础：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
// 必须调用createPinia()并挂载到Vue实例
app.use(createPinia())
app.mount('#app')

2. 优化tsconfig.json配置 #

调整tsconfig.json的compilerOptions，开启严格类型检查并引入Pinia类型：

{
  "compilerOptions": {
    "strict": true, // 开启严格模式是类型安全的核心前提
    "types": ["pinia"], // 显式引入Pinia的类型定义
    "target": "ES2020" // 建议使用ES2020及以上版本，提升类型推导能力
  }
}

3. 优化Store的类型定义写法 #

方式一：优化选项式Store的类型推导

无需手动断言[] as DataT[]，利用DataStore接口的约束自动推导类型：

import { defineStore } from "pinia";
import type { DataT } from "@/types";

interface DataStore {
  data: DataT[];
}

export const useDataStore = defineStore("dataStore", {
  state: (): DataStore => ({
    data: [], // TS会根据DataStore接口自动推导data的类型为DataT[]
  }),
});

// 可选：提取Store实例类型，方便在其他组件/工具中复用
export type DataStoreInstance = ReturnType<typeof useDataStore>;

方式二：使用Pinia的组合式写法（推荐）

组合式写法的类型推导更直观强大，无需额外定义接口：

import { defineStore } from "pinia";
import { ref } from "vue";
import type { DataT } from "@/types";

export const useDataStore = defineStore("dataStore", () => {
  // 直接为ref指定泛型，明确data的类型
  const data = ref<DataT[]>([]);

  // actions也能自动获得类型支持
  const addData = (newItem: DataT) => {
    data.value.push(newItem);
  };

  return {
    data,
    addData,
  };
});

4. 检查开发工具支持 #

确保VSCode安装了最新版本的Volar插件（不要使用Vetur），Volar对Vue3 + TypeScript的类型支持更完善，能正确识别Pinia的类型。

5. 重启TypeScript服务 #

如果以上配置都正确但类型仍未生效，可在VSCode中打开命令面板（Ctrl+Shift+P），执行TypeScript: Restart TS Server，强制重新加载类型定义。

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