react-typescript

## Quick Reference

| Type | Usage | Example |
|------|-------|---------|
| Props interface | Component props | `interface ButtonProps { variant: 'primary' }` |
| `ReactNode` | Children | `children: ReactNode` |
| `ChangeEvent` | Input change | `(e: ChangeEvent<HTMLInputElement>)` |
| `FormEvent` | Form submit | `(e: FormEvent<HTMLFormElement>)` |
| `MouseEvent` | Click | `(e: MouseEvent<HTMLButtonElement>)` |

| Pattern | Example |
|---------|---------|
| Extend HTML props | `extends ButtonHTMLAttributes<HTMLButtonElement>` |
| Generic component | `function List<T>({ items }: { items: T[] })` |
| forwardRef | `forwardRef<HTMLInputElement, Props>` |
| Discriminated union | `{ status: 'success'; data: T } \| { status: 'error'; error: Error }` |

| Utility Type | Purpose |
|--------------|---------|
| `Partial<T>` | All props optional |
| `Pick<T, K>` | Select specific props |
| `Omit<T, K>` | Exclude specific props |
| `ComponentProps<'button'>` | Get element props |

## When to Use This Skill

Use for **React TypeScript integration**:
- Typing component props and children
- Handling events with proper types
- Building generic reusable components
- Creating type-safe context and hooks
- Using utility types for prop manipulation
- Implementing polymorphic components

**For React basics**: see `react-fundamentals-19`

---

# React with TypeScript

## Component Props

### Basic Props Types

```tsx
// Inline props type
function Greeting({ name, age }: { name: string; age: number }) {
  return <p>Hello {name}, you are {age} years old</p>;
}

// Interface for props
interface UserCardProps {
  name: string;
  email: string;
  avatar?: string;  // Optional prop
  role: 'admin' | 'user' | 'guest';  // Union type
}

function UserCard({ name, email, avatar, role }: UserCardProps) {
  return (
    <div className="user-card">
      {avatar && <img src={avatar} alt={name} />}
      <h3>{name}</h3>
      <p>{email}</p>
      <span className={`badge-${role}`}>{role}</span>
    </div