How to use Zustand with TypeScript?

You can use Zustand with TypeScript by defining an interface for your state and actions, and then passing that interface to the `create` function: `create' '()(...)`.

How to type actions in Zustand?

Actions should be defined as part of your store interface. For example: `increment: () => void`. Inside the implementation, TypeScript will automatically infer the types of `set` and `get`.

TypeScript Best Practices

The ultimate guide to type-safe state management with Zustand.

Basic Typing

The most common way to type a store is to define an interface that includes both state and actions.

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

Using `combine` (Inferred Types)

If you prefer not to write interfaces manually, you can use the `combine` middleware to infer types from your initial state.

import { create } from 'zustand'
import { combine } from 'zustand/middleware'

const useBearStore = create(
  combine({ bears: 0 }, (set) => ({
    increase: (by: number) => set((state) => ({ bears: state.bears + by })),
  })),
)
// Type is automatically inferred!

Slices Pattern with TypeScript

When splitting your store into slices, you need to define the StateCreator type properly.

import { create, StateCreator } from 'zustand'

interface BearSlice {
  bears: number
  addBear: () => void
}

interface FishSlice {
  fishes: number
  addFish: () => void
}

const createBearSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  BearSlice
> = (set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
})

const createFishSlice: StateCreator<
  BearSlice & FishSlice,
  [],
  [],
  FishSlice
> = (set) => ({
  fishes: 0,
  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})

const useBoundStore = create<BearSlice & FishSlice>()((...a) => ({
  ...createBearSlice(...a),
  ...createFishSlice(...a),
}))