Vanilla State

TypeScript Example

Type-safe state management with full IDE support

Pro Tip: Hover over the code snippets below or in your IDE to see the inferred types and interface definitions.

Type-Safe Definitions

interface User {
  id: number;
  name: string;
  email: string;
}

// State with explicit type
const user = new VnlState<User>({
  id: 1,
  name: 'John',
  email: 'john@example.com'
});

// IDE will provide autocomplete and type checking
user.set('name', 'Jane'); // OK
user.set('age', 25);      // Error: 'age' does not exist on type 'User'

Reactivity Demo

0

Todo List (Object Array)

Demonstrating complex state with interfaces and arrays.

TypeScript Benefits

Type Safety: Catches type errors at compile time to prevent runtime errors.
IDE Support: Enhanced development tools support like autocompletion.
Refactoring Ease: Easily identify related parts when making code changes.
Clear Documentation: Types serve as documentation for your code.

New API: Notification Control

Vanilla State provides options to control notifications when updating state:

Primitive State: state.set(value, { notify: false })
Object State: state.set('propertyName', value, { notify: false })

Disabling notifications updates the state without calling listeners, which can optimize performance.