使用工厂模式封装Pinia defineStore时如何保留类型推导？

一、自动推导类型的正确实现 #

问题核心在于跨文件调用时，工厂函数的泛型约束没有正确传递给TS的类型推断系统。只需让storeFactory明确接收并传递State、Getters、Actions的泛型参数，即可保留自动推导能力：

// File A: storeFactory.ts
import { defineStore, StoreDefinition } from 'pinia'

// 明确泛型约束，确保TS能捕获传入的state、getters、actions类型
export function storeFactory<
  State extends object,
  Getters extends Record<string, any>,
  Actions extends Record<string, any>
>(
  id: string,
  options: {
    state: () => State
    getters?: Getters & ThisType<StoreDefinition<string, State, Getters, Actions>>
    actions?: Actions & ThisType<StoreDefinition<string, State, Getters, Actions>>
  }
): StoreDefinition<string, State, Getters, Actions> {
  // 这里添加你的规范化逻辑（比如统一注入日志方法、权限校验等）
  return defineStore(id, options)
}

在File B中调用时，TS会自动推导所有类型：

// File B: useUserStore.ts
import { storeFactory } from './storeFactory'

export const useUserStore = storeFactory('user', {
  state: () => ({
    name: '',
    age: 0
  }),
  getters: {
    isAdult: (state) => state.age >= 18
  },
  actions: {
    setName(name: string) {
      this.name = name // 此处this会正确推导为store实例，类型提示正常
    }
  }
})

// 使用时类型完全保留
const store = useUserStore()
store.name // 类型为string
store.isAdult // 类型为boolean
store.setName('Alice') // 参数类型校验正常

二、手动定义类型的替代方案 #

如果自动推导因复杂逻辑受限，可手动定义类型并结合Pinia的Store类型适配：

1. 先定义store的核心类型接口：

// types/userStore.ts
interface UserState {
  name: string
  age: number
}

interface UserGetters {
  isAdult: boolean
}

interface UserActions {
  setName: (name: string) => void
}

2. 调用storeFactory时手动指定泛型，或对返回值做类型断言：

// File B: useUserStore.ts
import { storeFactory } from './storeFactory'
import { Store } from 'pinia'
import type { UserState, UserGetters, UserActions } from './types/userStore'

// 手动指定泛型参数
export const useUserStore = storeFactory<UserState, UserGetters, UserActions>('user', {
  state: () => ({ name: '', age: 0 }),
  getters: {
    isAdult: (state) => state.age >= 18
  },
  actions: {
    setName(name) {
      this.name = name
    }
  }
})

// 或使用Pinia的Store类型做断言（适用于更复杂的场景）
type UserStore = Store<'user', UserState, UserGetters, UserActions>
export const useUserStore = storeFactory('user', { ... }) as UserStore

注意事项 #

• 避免在工厂函数内部使用any类型，否则会破坏TS的类型推断链；
• ThisType的作用是让getters和actions中的this能正确推导为store实例，确保内部调用的类型提示正常；
• 若使用Pinia的选项式API之外的写法（比如组合式API），只需调整泛型约束为对应类型即可。

内容的提问来源于stack exchange，提问作者Léo Coco