如何在TypeScript中为SolidJS的setStore创建保留类型的包装函数？

你通过以下代码创建了SolidJS store：

const [store, setStore] = createStore<SomeComplexType>();

想要在每次调用setStore前执行前置代码，但尝试包装时遇到了类型错误：

const setStore: SetStoreFunction<SomeComplexType> = (...args: Parameters<SetStoreFunction<SomeComplexType>>) => {
  setStore_(...args);
};

报错信息为：

展开参数必须具有元组类型或传递给剩余参数。

下面是可行的解决方案：

步骤1：保存原始setStore方法 #

首先将原始的setStore重命名保存，避免包装时的命名冲突：

const [store, originalSetStore] = createStore<SomeComplexType>();

方案1：复用原始类型（推荐） #

直接使用typeof originalSetStore继承原方法的所有类型定义和重载，同时通过类型断言解决展开参数的类型错误：

const setStore: typeof originalSetStore = (...args) => {
  // 这里编写你需要执行的前置代码
  console.log("调用setStore前执行的逻辑");
  // 断言参数为原始方法的参数类型，绕过联合元组的类型检查
  return originalSetStore(...(args as Parameters<typeof originalSetStore>[number]));
};

方案2：显式指定SetStoreFunction类型 #

如果你希望明确指定SetStoreFunction类型，可按如下方式实现：

import type { SetStoreFunction } from "solid-js/store";

const setStore: SetStoreFunction<SomeComplexType> = (...args) => {
  // 执行前置操作
  console.log("执行setStore前置逻辑");
  // 断言参数为对应类型以通过检查
  return originalSetStore(...(args as Parameters<SetStoreFunction<SomeComplexType>>[number]));
};

错误原因解析 #

SetStoreFunction是SolidJS提供的重载函数，Parameters<SetStoreFunction<SomeComplexType>>会返回多个参数元组的联合类型。TypeScript无法确定你传递的具体是哪个元组，因此禁止直接展开联合元组。通过类型断言将参数指定为联合中的任意元组类型，即可解决该错误。

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