TypeScript-First Development with Olum

TypeScript support in Olum isn't bolted on — it's the primary authoring experience. Every API is designed so that TypeScript can infer types without manual annotations.

Typed props with zero boilerplate

Define your props as a TypeScript interface. Olum's compiler reads the type at build time and generates the runtime prop validation automatically.

// UserCard.olum
import { signal } from 'olum'

interface Props {
  name: string
  role?: 'admin' | 'user' | 'guest'
  onSelect: (id: string) => void
}

export function UserCard({ name, role = 'user', onSelect }: Props) {
  const hovered = signal(false)

  return (
    <div
      class={{ card: true, hovered: hovered }}
      on:mouseenter={() => hovered.value = true}
      on:mouseleave={() => hovered.value = false}
      on:click={() => onSelect(name)}
    >
      <span>{name}</span>
      <Badge type={role} />
    </div>
  )
}

Typed emits and slots

The emit() helper is fully typed — TypeScript will error if you emit an event that isn't declared in the component's interface, or pass the wrong payload type.

IDE support

The VS Code extension provides autocomplete for props, emits, and slot names — including completions from child components that are imported in the template. The language server is built on the same compiler infrastructure as the bundler, so it's always in sync.