Subagents TypeScript Developer Guide

Claude Code Subagents: TypeScript Developer Guide

TypeScript-Specific Patterns

1. Type-Safe Feature Implementation

When implementing features with subagents, ensure type safety across all components:

// Example: E-commerce product listing feature
const typeScriptFeaturePattern = `
Implement a type-safe product listing feature:
 
Task 1 - Types: Create product.types.ts
interface Product {
  id: string;
  name: string;
  price: number;
  category: Category;
  inventory: InventoryStatus;
}
 
Task 2 - API Layer: Create productApi.ts with proper return types
const fetchProducts = async (): Promise<ApiResponse<Product[]>>
 
Task 3 - State Management: Create productStore.ts with typed actions
type ProductAction = 
  | { type: 'FETCH_START' }
  | { type: 'FETCH_SUCCESS'; payload: Product[] }
  | { type: 'FETCH_ERROR'; error: Error }
 
Task 4 - Component: Create ProductList.tsx with prop types
interface ProductListProps {
  products: Product[];
  onProductSelect: (id: string) => void;
}
 
Task 5 - Hooks: Create useProducts.ts with typed returns
const useProducts = (): {
  products: Product[];
  loading: boolean;
  error: Error | null;
}
 
Task 6 - Tests: Write type-safe tests
Task 7 - Integration: Update module exports and routing
`;

2. API Integration Pattern

Parallel implementation of typed API integrations:

// Example: REST API client with TypeScript
const apiIntegrationPattern = `
Create a fully-typed API client for the user service:
 
Task 1 - Base Types: Define API types and interfaces
// api.types.ts
interface ApiConfig {
  baseURL: string;
  timeout: number;
  headers: Record<string, string>;
}
 
interface ApiError {
  code: string;
  message: string;
  details?: unknown;
}
 
Task 2 - Request Builders: Create typed request helpers
// requestBuilders.ts
function buildRequest<T>(
  method: HttpMethod,
  endpoint: string,
  data?: unknown
): Request<T>
 
Task 3 - Response Handlers: Create typed response processing
// responseHandlers.ts
function handleResponse<T>(
  response: Response
): Promise<ApiResponse<T>>
 
Task 4 - Client Implementation: Build the main API client
// apiClient.ts
class ApiClient {
  get<T>(endpoint: string): Promise<T>
  post<T, D>(endpoint: string, data: D): Promise<T>
  put<T, D>(endpoint: string, data: D): Promise<T>
  delete<T>(endpoint: string): Promise<T>
}
 
Task 5 - Error Handling: Implement typed error handlers
Task 6 - Interceptors: Add request/response interceptors
Task 7 - Tests: Create comprehensive type-safe tests
`;

3. React Component Development Pattern

Building React components with proper TypeScript types:

// Example: Complex form component
const reactComponentPattern = `
Build a multi-step form component with TypeScript:
 
Task 1 - Form Types: Define all form-related types
// formTypes.ts
interface FormData {
  personalInfo: PersonalInfo;
  contactDetails: ContactDetails;
  preferences: UserPreferences;
}
 
type FormStep = 'personal' | 'contact' | 'preferences' | 'review';
 
interface FormContext {
  data: FormData;
  currentStep: FormStep;
  updateData: <K extends keyof FormData>(
    key: K, 
    value: FormData[K]
  ) => void;
}
 
Task 2 - Form Context: Create typed React context
Task 3 - Step Components: Build individual step components
Task 4 - Validation: Implement type-safe validation
Task 5 - Form Hooks: Create custom hooks with proper types
Task 6 - Main Component: Assemble the multi-step form
Task 7 - Tests: Write tests with React Testing Library
`;

4. State Management Pattern

Implementing typed state management solutions:

For implementing typed state management with Redux Toolkit and the shopping cart pattern, see the 7-Parallel-Task Pattern which demonstrates comprehensive feature implementation including state management.

5. Next.js App Router Pattern

TypeScript patterns for Next.js 13+ App Router:

// Example: Server components with TypeScript
const nextjsPattern = `
Build a Next.js 13 app directory feature:
 
Task 1 - Route Types: Define route params and search params
// app/products/[id]/page.tsx
interface PageProps {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
}
 
Task 2 - Server Components: Create typed server components
// app/products/ProductList.tsx
async function ProductList({ 
  category 
}: { 
  category?: string 
}): Promise<JSX.Element>
 
Task 3 - Client Components: Build interactive components
// app/products/AddToCart.tsx
'use client';
interface AddToCartProps {
  productId: string;
  onAdd?: (id: string) => void;
}
 
Task 4 - Server Actions: Implement typed server actions
// app/actions/products.ts
'use server';
async function updateProduct(
  id: string, 
  data: ProductUpdate
): Promise<ActionResult<Product>>
 
Task 5 - Loading/Error: Create typed loading and error states
Task 6 - Metadata: Generate typed metadata
Task 7 - Tests: Write integration tests
`;

TypeScript Configuration Best Practices

CLAUDE.md Configuration

// Example CLAUDE.md for TypeScript projects
const claudeMdContent = `
# Project Configuration
 
## TypeScript Settings
- Strict mode enabled
- Target: ES2022
- Module: ESNext
- JSX: react-jsx
 
## Code Style
- Use interfaces over types for object shapes
- Prefer const assertions for literals
- Use discriminated unions for state
- Always define return types for functions
- Use generic constraints appropriately
 
## Import Conventions
- Use named exports for components
- Use default exports for pages (Next.js)
- Group imports: external, internal, types
- Use absolute imports with @ alias
 
## Testing
- Use React Testing Library for components
- Mock external dependencies with ts-jest
- Maintain type safety in tests
- Use MSW for API mocking
`;

Common TypeScript Subagent Tasks

1. Type Generation from API

const typeGenerationTask = `
Generate TypeScript types from the OpenAPI spec:
- Parse swagger.json
- Create interfaces for all schemas
- Generate typed API client methods
- Add JSDoc comments from descriptions
`;

2. Migration to Strict Mode

const strictModeTask = `
Migrate codebase to TypeScript strict mode:
Task 1: Fix null/undefined issues
Task 2: Add explicit any annotations
Task 3: Fix implicit any parameters
Task 4: Add missing return types
Task 5: Fix this binding issues
`;

3. Generic Component Creation

const genericComponentTask = `
Create a generic data table component:
- Support any data type with generics
- Typed column definitions
- Type-safe sorting and filtering
- Proper event handler types
`;

TypeScript-Specific Debugging

Common Issues and Solutions

1. Type Inference Problems

// Subagent instruction
"Ensure explicit return types for better inference"

2. Module Resolution

// Subagent instruction
"Check tsconfig paths and module resolution strategy"

3. Generic Constraints

// Subagent instruction
"Add proper extends constraints to generic parameters"

Integration Examples

With Popular TypeScript Libraries

// Example: Zod validation
const zodIntegration = `
Implement form validation with Zod:
Task 1: Define Zod schemas
Task 2: Generate TypeScript types from schemas
Task 3: Create validation hooks
Task 4: Integrate with React Hook Form
`;
 
// Example: tRPC integration
const trpcIntegration = `
Set up tRPC with proper types:
Task 1: Define procedure inputs/outputs
Task 2: Create typed router
Task 3: Generate client hooks
Task 4: Add error handling types
`;

Performance Considerations

1. Type Checking: Subagents should use incremental type checking
2. Build Performance: Consider using esbuild or SWC for faster builds
3. Type Imports: Use import type to reduce bundle size
4. Conditional Types: Be cautious with complex conditional types

Related Topics

• React-Specific Patterns
• Testing Strategies
• Performance Optimization
• Hooks with TypeScript