TypeScript Prop Definition

Interface Convention

Use `interface` for component props:

```tsx /**

• Props for the Button component / interface ButtonProps { /* Button text or content / children: React.ReactNode; /* Click handler / onClick?: () => void; /* Whether button is disabled */ disabled?: boolean; }

export function Button({ children, onClick, disabled }: ButtonProps) { // ... } ```

JSDoc Comments

Document each prop:

```tsx interface UserCardProps { /** User's full name / name: string; /* User's email address / email: string; /* Optional avatar URL */ avatarUrl?: string; } ```

Generics for Reusable Components

```tsx interface ListProps { items: T[]; renderItem: (item: T) => React.ReactNode; keyExtractor: (item: T) => string; }

function List({ items, renderItem, keyExtractor }: ListProps) { return (

{items.map(item => (
• {renderItem(item)}
))}

); } ```

Utility Types

Extending Native Props

```tsx interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'default' | 'destructive'; } ```

Pick/Omit

```tsx type UserPublicInfo = Pick<User, 'name' | 'email'>; type UserWithoutPassword = Omit<User, 'password'>; ```

Partial

```tsx type PartialUser = Partial; // All fields optional ```

cva + VariantProps Pattern

```tsx import { cva, type VariantProps } from 'class-variance-authority';

const buttonVariants = cva("base-classes", { variants: { variant: { default: "...", destructive: "...", }, size: { default: "...", sm: "...", }, }, defaultVariants: { variant: "default", size: "default", }, });

// Automatically inferred type from cva interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { // variant?: "default" | "destructive" // size?: "default" | "sm" } ```

Anti-Patterns

❌ Using `any` type ❌ Missing JSDoc comments ❌ Manually typing variants (use VariantProps) ❌ `children: any` (use `React.ReactNode`)

✅ Explicit interface with JSDoc ✅ Use VariantProps for cva ✅ Leverage utility types

---

Token Estimate: ~2,800 tokens