如何设置TypeScript函数参数类型为自身返回类型且无需单独声明Store类型

实现方案 #

TS无法处理自引用的类型推断（getInitialStore的参数类型依赖自身返回值类型），可以通过两种方案解决，均不需要单独维护Store类型：

方案1：最小改动适配原有代码

仅需要把getInitialStore的参数类型临时标注为any即可，外层create会自动约束传入的set/get类型，不会出现类型安全问题：

// 参数标注为any，不影响实际类型安全，TS会自动推导返回值的完整类型
const getInitialStore = (set: any, get: any) => {
  // 原有逻辑不变
  return { my, store, fields }
}

export const useStore = create<ReturnType<typeof getInitialStore>>(
  withImmer((set, get) => getInitialStore(set, get))
)

方案2：使用Zustand柯里化写法

如果使用Zustand v4及以上版本，更推荐用官方原生的柯里化create写法，无需手动标注任何类型：

import { create } from 'zustand'
import { withImmer } from 'zustand/middleware/immer'

export const useStore = create()(
  withImmer((set, get) => {
    // 直接写所有store逻辑，不需要抽成单独函数
    return {
      my: 1,
      store: 'test',
      fields: [],
      // 方法逻辑也可以直接写在此处
      updateField: (newVal: string) => set(draft => { draft.fields.push(newVal) })
    }
  })
)

效果验证 #

两种方案均可以实现：

• 不需要手动声明Store接口/类型，所有类型自动从初始化逻辑推导
• 新增/修改store字段、方法时，仅需要修改初始化逻辑，类型自动同步，不会出现定义和实现不一致的问题
• 调用useStore时可以获得完整的类型提示和校验

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