如何在TypeScript中为中间函数透传Zustand的UseStore接口类型？

解决方案 #

你遇到的核心问题是Parameters工具类无法保留函数重载的泛型推导能力，只能解析到重载的最后一个签名，导致调用时泛型U丢失被推导为unknown。根据你的使用场景有两种最优解：

场景1：getStoreHook可在模块初始化阶段执行（无上下文依赖）

直接将返回的useSettings实例做类型断言后导出即可，所有类型、重载、静态方法会完全对齐原生UseStore定义：

import type { UseStore } from 'zustand'

// 替换为你实际的Store状态类型
interface DeviceSettingsState {
  isSyncOn: boolean
  // 其他状态字段
}

export const useDeviceSettings = getStoreHook() as UseStore<DeviceSettingsState>

调用方式和原生useSettings完全一致：

const isSyncOn = useDeviceSettings(state => state.isSyncOn)

场景2：必须在useDeviceSettings被调用（组件渲染阶段）才执行getStoreHook（比如依赖React上下文）

需要手动对齐UseStore的重载签名，再挂载所有静态方法，最后做类型断言保证类型匹配：

import type { UseStore, StateSelector, EqualityChecker } from 'zustand'

interface DeviceSettingsState {
  isSyncOn: boolean
  // 其他状态字段
}

// 对齐UseStore的两个调用重载
function useDeviceSettings(): DeviceSettingsState
function useDeviceSettings<U>(
  selector: StateSelector<DeviceSettingsState, U>,
  equalityFn?: EqualityChecker<U>
): U
function useDeviceSettings(...args: any[]) {
  const useSettings = getStoreHook()
  return useSettings(...args)
}

// 挂载UseStore要求的所有静态方法
const rawUseSettings = getStoreHook()
useDeviceSettings.setState = rawUseSettings.setState
useDeviceSettings.getState = rawUseSettings.getState
useDeviceSettings.subscribe = rawUseSettings.subscribe
useDeviceSettings.destroy = rawUseSettings.destroy

export default useDeviceSettings as UseStore<DeviceSettingsState>

原错误原因说明 #

• 初始写法无参数类型声明，触发TS隐式any校验报错
• 用Parameters声明参数类型的写法，会丢失重载的泛型推导能力，U无法被正确推导返回unknown触发报错
• 嵌套括号的写法虽然类型正确，但破坏了原生Zustand hook的调用习惯，完全可以通过类型断言避免额外嵌套

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