---
description: Port TypeScript types from thrillwiki-87 to the Nuxt project
---

# Migrate Type Workflow

Port TypeScript type definitions from thrillwiki-87 to the Nuxt 4 project, ensuring sync with Django serializers.

## Step 1: Locate Source Types

Find types in thrillwiki-87:
```bash
/Volumes/macminissd/Projects/thrillwiki-87/src/types/
```

Key type files (63 total):
- `database.ts` - Core entity types (12KB)
- `statuses.ts` - Status enums (13KB)
- `moderation.ts` - Moderation types (10KB)
- `rideAttributes.ts` - Ride specs (8KB)
- `versioning.ts` - Version history (7KB)
- `submissions.ts` - Submission types
- `company.ts` - Company entities

## Step 2: Analyze Source Types

Extract type structure:

```typescript
// thrillwiki-87/src/types/database.ts
export interface Park {
  id: string
  name: string
  slug: string
  park_type: ParkType
  status: ParkStatus
  opening_date?: string
  closing_date?: string
  location?: ParkLocation
  // ... 
}

export interface ParkLocation {
  latitude: number
  longitude: number
  country: string
  city?: string
  // ...
}
```

## Step 3: Check Django Serializers

Before porting, verify Django backend has matching fields:

```bash
# Check serializers in:
backend/apps/parks/serializers.py
backend/apps/rides/serializers.py
backend/apps/companies/serializers.py
```

The Django serializer defines what the API returns:
```python
class ParkSerializer(serializers.ModelSerializer):
    class Meta:
        model = Park
        fields = ['id', 'name', 'slug', 'park_type', 'status', ...]
```

## Step 4: Handle Naming Conventions

Django uses snake_case, TypeScript typically uses camelCase. Choose one strategy:

### Option A: Match Django exactly (Recommended)
```typescript
// Keep snake_case from API
export interface Park {
  id: string
  name: string
  park_type: string
  created_at: string
}
```

### Option B: Transform in API layer
```typescript
// camelCase in types
export interface Park {
  id: string
  name: string
  parkType: string
  createdAt: string
}
// Transform in useApi or serializer
```

**Current project uses Option A (snake_case).**

## Step 5: Port the Types

Create/update type files:

```typescript
// frontend/app/types/park.ts
export interface Park {
  id: string
  name: string
  slug: string
  park_type: string
  status: string
  short_description?: string
  description?: string
  opening_date?: string
  closing_date?: string
  operating_season?: string
  website?: string
  latitude?: number
  longitude?: number
  // Match Django serializer fields exactly
}

export interface ParkDetail extends Park {
  rides?: Ride[]
  reviews?: Review[]
  photos?: Photo[]
  // Extended fields from detail serializer
}
```

## Step 6: Port Enums/Options

Source may have enums that should be constants:

```typescript
// thrillwiki-87/src/types/statuses.ts
export const PARK_STATUS = {
  OPERATING: 'operating',
  CLOSED: 'closed',
  // ...
} as const
```
↓
```typescript
// frontend/app/utils/constants.ts
export const PARK_STATUS_OPTIONS = [
  { value: 'operating', label: 'Operating', color: 'green' },
  { value: 'closed', label: 'Closed', color: 'red' },
  // Sync with backend/apps/parks/choices.py
]
```

## Step 7: Target Locations

```
frontend/app/types/
├── index.ts          # Re-exports and common types
├── park.ts           # Park types
├── ride.ts           # Ride types
├── company.ts        # Company types (manufacturer, designer, etc.)
├── user.ts           # User/profile types
├── moderation.ts     # Moderation types
└── api.ts            # API response wrappers
```

## Step 8: Verify Type Sync

| Layer | File | Must Match |
|-------|------|------------|
| Django Model | `backend/apps/*/models.py` | Database schema |
| Serializer | `backend/apps/*/serializers.py` | API response |
| Frontend Type | `frontend/app/types/*.ts` | Serializer fields |

Run checks:
```bash
# Check Django fields
python manage.py shell -c "from apps.parks.models import Park; print([f.name for f in Park._meta.fields])"

# Check serializer fields  
python manage.py shell -c "from apps.parks.serializers import ParkSerializer; print(ParkSerializer().fields.keys())"
```

## Step 9: Checklist

- [ ] All source type fields ported
- [ ] Fields match Django serializer
- [ ] snake_case naming used
- [ ] Optional fields marked with `?`
- [ ] Enums/options in constants.ts
- [ ] Backend choices.py synced
- [ ] Types exported from index.ts

## Priority Types

| Type File | Source Size | Notes |
|-----------|-------------|-------|
| statuses.ts | 13KB | All status enums |
| database.ts | 12KB | Core entities |
| moderation.ts | 10KB | Queue types |
| rideAttributes.ts | 8KB | Spec options |
| versioning.ts | 7KB | History types |
