TypeScript で Zustand を使用するには？

状態とアクションのインターフェースを定義し、そのインターフェースを `create` 関数に渡すことで、TypeScript で Zustand を使用できます：`create' '()(...)`。

Zustand でアクションに型を付けるには？

アクションはストアインターフェースの一部として定義する必要があります。例：`increment: () => void`。実装内部では、TypeScript が `set` と `get` の型を自動的に推論します。

TypeScript ベストプラクティス

Zustand による型安全な状態管理の究極のガイド。

基本的な型定義

ストアに型を付ける最も一般的な方法は、状態とアクションの両方を含むインターフェースを定義することです。

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 })),
}))

`combine` の使用（型推論）

インターフェースを手動で記述したくない場合は、`combine` ミドルウェアを使用して初期状態から型を推論できます。

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!

TypeScript によるスライスパターン

ストアをスライスに分割する場合、StateCreator 型を適切に定義する必要があります。

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),
}))