Pinia + TS：如何为接收Store的函数正确定义参数类型

你的问题出在参数类型不匹配以及Union类型的Pick用法未达预期上，下面直接给出可行解决方案：

方案1：接收Store实例 #

如果想让函数接收已创建的Store实例并调用foo，可以先定义包含共享方法的接口，再让函数参数实现该接口：

// 定义共享方法的接口
interface HasFoo {
  foo: () => void;
}

// 函数接收实现了HasFoo的Store实例
const callStoreFunction = (store: HasFoo) => {
  store.foo();
};

// 使用时传入调用后的Store实例
callStoreFunction(storeOne());
callStoreFunction(storeTwo());

方案2：接收Store创建函数 #

如果需求是传入defineStore返回的创建函数（比如storeOne本身），再在函数内部实例化并调用foo，可以这样定义类型：

interface HasFoo {
  foo: () => void;
}

// 定义Store创建函数的类型：返回包含foo方法的实例
type StoreCreator = () => HasFoo;

const callStoreFunction = (storeCreator: StoreCreator) => {
  const store = storeCreator();
  store.foo();
};

// 直接传入storeOne/storeTwo即可
callStoreFunction(storeOne);
callStoreFunction(storeTwo);

错误原因解析 #

你之前的写法存在两个核心问题：

1. 参数类型不匹配：你传入的storeOne/storeTwo是defineStore返回的Store创建函数，但你定义的PickedStoreCollection是Store实例的类型，自然会提示类型不兼容。
2. Union类型的Pick问题：Pick<ReturnType<typeof storeOne> | ReturnType<typeof storeTwo>, 'foo'>虽然能提取到foo方法，但这种Union类型的处理方式不如直接定义接口清晰，也不符合TypeScript的结构类型兼容规则。

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