在Zustand的create方法中使用泛型的实现困惑

你需要在保持Zustand Store单例的前提下，给它传递泛型类型，同时保证选中行的类型安全，以下是可行的解决方案：

步骤1：修正初始状态的类型约束 #

先给initialState加上明确的类型定义，避免空数组导致的类型推断异常：

interface MainGridState<T> {
  selectedRows: Array<GridRow<T>>
}

// 用never作为初始泛型，确保初始状态的类型兼容性
const initialState: MainGridState<never> = {
  selectedRows: []
}

步骤2：创建单例泛型Store #

创建Store时使用unknown作为基础泛型，既能保持单例，又能后续通过泛型约束细化类型：

import { create } from 'zustand'

// 仅创建一次单例Store，基础类型设为MainGridState<unknown>
const useMainGridStore = create<MainGridState<unknown>>()(set => ({
  ...initialState,
  // 可在这里定义修改状态的方法，比如：
  setSelectedRows: (rows: Array<GridRow<unknown>>) => set({ selectedRows: rows })
}))

步骤3：封装泛型Hook做类型转换 #

通过自定义泛型Hook，将Store的unknown类型转换为业务需要的具体泛型T，保证类型安全：

export const useMainGridSelectedRows = <T>(): Array<GridRow<T>> => {
  // 用类型断言将unknown转换为T，业务层会传递正确的泛型，确保类型匹配
  return useMainGridStore(state => state.selectedRows as Array<GridRow<T>>)
}

// 如果需要修改选中行，也可以封装对应的泛型Hook
export const useMainGridSetSelectedRows = <T>() => {
  return useMainGridStore(state => 
    (rows: Array<GridRow<T>>) => state.setSelectedRows(rows as Array<GridRow<unknown>>)
  )
}

使用示例 #

在业务组件中直接调用泛型Hook即可：

// 假设表格数据类型为User
interface User {
  id: string
  name: string
}

// 获取选中行，类型自动推导为Array<GridRow<User>>
const selectedRows = useMainGridSelectedRows<User>()

// 设置选中行
const setSelectedRows = useMainGridSetSelectedRows<User>()
setSelectedRows([{ id: '1', data: { id: '1', name: '张三' } }])

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