Type Safety
How to use TypeScript to build indestructible components that AI assistants understand perfectly.
In Axolot, TypeScript interfaces are more than just build-time checks; they are instructions for the AI. When an AI agent reads an Astro component, it uses your type definitions to understand the logical boundaries of the UI.
TypeScript as Metadata
When you define an interface Props, Axolot's AI engine uses it to build a context map. If you define a property as a union type, the AI will only ever suggest values within that union.
AI-First Tip: Use JSDoc comments above your props. Our engine extracts these as "System Prompts" for the AI when it's editing that specific slot.
Discriminated Unions
Avoid using string for properties like variants or themes. Use strict unions to guide the AI's creativity.
export interface Props {
/** @description Main title of the hero section */
title: string;
/** @description Visual style of the component */
variant: 'minimal' | 'glass' | 'bold';
} Slot-Type Synchronization
When the AxolotBridge syncs a slot, it also attempts to infer the type. By providing clear TypeScript definitions, you ensure that the Visual Editor shows the correct input type (e.g., a color picker for color types, or a toggle for boolean).