--- description: Provides language-specific patterns for TypeScript, Python, and React including idioms, best practices, and common patterns --- # Language Patterns This skill provides language-specific patterns and best practices. Apply patterns that match the project's language and framework. --- ## TypeScript Patterns ### Type Safety **Use strict types over `any`:** ```typescript \/\/ Bad function process(data: any): any { return data.value; } \/\/ Good interface DataItem { value: string; count: number; } function process(data: DataItem): string { return data.value; } ``` **Use discriminated unions for variants:** ```typescript type Result = | { success: true; data: T } | { success: false; error: Error }; function handleResult(result: Result) { if (result.success) { \/\/ TypeScript knows result.data exists console.log(result.data); } else { \/\/ TypeScript knows result.error exists console.error(result.error); } } ``` **Use `unknown` over `any` for external data:** ```typescript async function fetchData(): Promise { const response = await fetch('\/api\/data'); return response.json(); } \/\/ Then validate\/parse const data = await fetchData(); if (isValidData(data)) { \/\/ Now safely typed } ``` ### Null Handling **Use optional chaining and nullish coalescing:** ```typescript \/\/ Optional chaining const userName = user?.profile?.name; \/\/ Nullish coalescing (only for null\/undefined) const displayName = userName ?? 'Anonymous'; \/\/ Combine them const city = user?.address?.city ?? 'Unknown'; ``` **Use type guards:** ```typescript function isUser(obj: unknown): obj is User { return ( typeof obj === 'object' && obj !== null && 'id' in obj && 'email' in obj ); } ``` ### Async Patterns **Prefer async\/await over raw promises:** ```typescript \/\/ Good async function fetchUser(id: string): Promise { const response = await fetch(`\/api\/users\/${id}`); if (!response.ok) { throw new Error(`Failed to fetch user: ${response.status}`); } return response.json(); } ``` **Handle errors properly:** ```typescript async function safeOperation(): Promise> { try { const data = await riskyOperation(); return { success: true, data }; } catch (error) { return { success: false, error: error as Error }; } } ``` **Parallel operations:** ```typescript \/\/ Run in parallel const [users, posts] = await Promise.all([ fetchUsers(), fetchPosts() ]); \/\/ With error handling const results = await Promise.allSettled([ fetchUsers(), fetchPosts() ]); ``` --- ## Python Patterns ### Type Hints **Use type hints for clarity:** ```python from typing import Optional, List, Dict def process_users( users: List[dict], filter_active: bool = True ) -> List[str]: """Process users and return their names.""" result: List[str] = [] for user in users: if filter_active and not user.get("active"): continue result.append(user["name"]) return result ``` **Use dataclasses for data containers:** ```python from dataclasses import dataclass from typing import Optional @dataclass class User: id: int email: str name: str active: bool = True profile: Optional[dict] = None ``` **Use Pydantic for validation:** ```python from pydantic import BaseModel, EmailStr class UserCreate(BaseModel): email: EmailStr name: str age: int class Config: extra = "forbid" # Reject unknown fields ``` ### Pythonic Patterns **Use comprehensions:** ```python # List comprehension names = [user.name for user in users if user.active] # Dict comprehension user_map = {user.id: user for user in users} # Generator for large data active_users = (user for user in users if user.active) ``` **Context managers for resources:** ```python # File handling with open("file.txt", "r") as f: content = f.read() # Database connections with get_db_connection() as conn: conn.execute(query) # Custom context manager from contextlib import contextmanager @contextmanager def timer(name: str): start = time.time() yield print(f"{name}: {time.time() - start:.2f}s") ``` **Use `pathlib` for paths:** ```python from pathlib import Path config_path = Path(__file__).parent \/ "config" \/ "settings.yaml" if config_path.exists(): content = config_path.read_text() ``` ### Error Handling ```python class ValidationError(Exception): """Raised when input validation fails.""" pass class NotFoundError(Exception): """Raised when a resource is not found.""" pass def get_user(user_id: int) -> User: user = db.query(User).get(user_id) if user is None: raise NotFoundError(f"User {user_id} not found") return user ``` --- ## React Patterns ### Component Patterns **Functional components with hooks:** ```tsx interface UserCardProps { user: User; onEdit: (user: User) => void; } function UserCard({ user, onEdit }: UserCardProps) { const handleClick = useCallback(() => { onEdit(user); }, [user, onEdit]); return (