TypeScript Guide

stroid is TypeScript-first. Types flow from createStore intosetStore, useStore, andgetStore without manual generics in most cases.

Define a typed store

Add an explicit state type so inference stays precise.

store.ts

import { createStore, setStore, useStore } from 'stroid'

type Todo = { id: number; text: string; done: boolean }
type TodoState = { items: Todo[]; filter: 'all' | 'active' | 'done' }

createStore<TodoState>('todos', { items: [], filter: 'all' })

export function addTodo(text: string) {
  setStore('todos', (d) => {
    d.items.push({ id: Date.now(), text, done: false })
  })
}

Selectors stay typed

useStore infers the selector return type automatically.

component.tsx

const count = useStore('todos', (s) => s.items.length) // number
const filter = useStore('todos', (s) => s.filter)       // 'all' | 'active' | 'done'

Path helpers

Utilities from stroid/core help with deep paths.

paths.ts

import type { Path, PathValue } from 'stroid/core'
type State = TodoState

type AllPaths = Path<State>                  // "items" | "filter" | "items.0" | ...
type FilterValue = PathValue<State, 'filter'>  // 'all' | 'active' | 'done'

Tip

Prefer explicit types on arrays/unions in initial state (e.g.,[] as Todo[]) so inference has full information.