如何在 Zustand 中使用 TypeScript 确保类型安全？

Zustand 中使用 TypeScript 的方法：

1. 定义状态类型

   typescript
   interface UserState {
     user: {
       id: string;
       name: string;
       email: string;
     } | null;
     isLoading: boolean;
     error: string | null;
     setUser: (user: UserState['user']) => void;
     setLoading: (loading: boolean) => void;
     setError: (error: string | null) => void;
     logout: () => void;
   }

2. 创建类型化的 Store

   typescript
   import { create } from 'zustand';
   
   const useUserStore = create<UserState>((set) => ({
     user: null,
     isLoading: false,
     error: null,
     setUser: (user) => set({ user }),
     setLoading: (loading) => set({ loading }),
     setError: (error) => set({ error }),
     logout: () => set({ user: null, error: null }),
   }));

3. 在组件中使用

   typescript
   import { useUserStore } from './store';
   
   function UserProfile() {
     const user = useUserStore((state) => state.user);
     const isLoading = useUserStore((state) => state.isLoading);
     const error = useUserStore((state) => state.error);
     const logout = useUserStore((state) => state.logout);
   
     if (isLoading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
     if (!user) return <div>Please login</div>;
   
     return (
       <div>
         <h1>Welcome, {user.name}!</h1>
         <p>Email: {user.email}</p>
         <button onClick={logout}>Logout</button>
       </div>
     );
   }

4. 类型推断和自动补全

   • TypeScript 会自动推断状态和操作的类型
   • 编辑器会提供智能提示和类型检查

5. 复杂状态类型

   • 对于嵌套状态，可以使用嵌套接口
   • 对于动态状态，可以使用泛型

6. 中间件的类型支持

   • persist 中间件的类型配置
   • 自定义中间件的类型定义

最佳实践：

• 为每个 store 创建单独的类型定义文件
• 使用接口明确状态结构和操作签名
• 利用 TypeScript 的类型检查捕获潜在错误
• 结合泛型处理复杂的状态类型