TypeScript

The documentation template is built entirely with TypeScript, providing full type safety across components, configuration, and content. This guide covers the key type patterns used.

Overview

TypeScript ensures correctness at compile time — catching broken links, missing props, and configuration errors before they reach production. The template uses TypeScript 5.9 features including improved type inference and stricter checking.

Strict mode

The template ships with strict mode enabled in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

Component types

Documentation components use explicit prop interfaces for clarity and reusability:

type CalloutVariant = "info" | "warning" | "success" | "destructive"

interface CalloutProps {
  variant?: CalloutVariant
  title?: string
  children: ReactNode
}

// Variant configuration follows the config-driven pattern
const variantConfig: Record<
  CalloutVariant,
  { icon: typeof InfoIcon; classes: string }
> = {
  info: { icon: InfoIcon, classes: "border-accent/30 bg-accent/5" },
  // ...
}

Configuration types

The navigation configuration is fully typed, preventing broken links at compile time:

export interface NavItem {
  title: string
  href: string
  items?: NavItem[]
  label?: string
}

export interface DocsConfig {
  sidebarNav: NavItem[]
}

export const docsConfig: DocsConfig = {
  sidebarNav: [
    {
      title: "Getting Started",
      href: "/docs",
      items: [
        { title: "Introduction", href: "/docs" },
        // TypeScript will error on missing properties
      ],
    },
  ],
}

Best practices

• Explicit return types on exported functions for better documentation and error messages
• Interface over type for component props, as interfaces provide better error messages and are extendable
• Discriminated unions for component variants (e.g. callout types) to get exhaustive checking
• Const assertions for configuration objects to preserve literal types
• Template literal types for route paths where applicable