TypeScript Type Generation

What It Does

Generates .d.ts files from resolved token data so you get autocomplete and type checking when importing tokens in your application.

Usage

Resolve tokens first, then pass them to generateTypes:

const tokens = await dispersa.resolveTokens('./tokens.resolver.json', { theme: 'light' })
await dispersa.generateTypes(tokens, './dist/tokens.d.ts', {
  moduleName: 'design-tokens',
})

The Generated .d.ts

The generated declaration file enables autocomplete in editors when importing tokens. It declares the module and exports token paths as typed properties.

Options

Option	Description
moduleName	The module name for the declaration (for declare module "...")

Integrating into the Build Workflow

1. Resolve tokens for the permutation(s) you need
2. Generate types from the resolved result
3. Build outputs (css, json, etc.) as usual

// Resolve first
const tokens = await dispersa.resolveTokens('./tokens.resolver.json', { theme: 'light' })

// Generate types
await dispersa.generateTypes(tokens, './dist/tokens.d.ts', { moduleName: 'design-tokens' })

// Build outputs
await dispersa.build({ outputs: [/* ... */] })

Resolved tokens, not raw

Type generation uses the resolved tokens, not the raw token files. Run it after resolution to capture all aliases and modifier values.

API Reference — Dispersa Class Full API documentation for the Dispersa class and its methods.