javascript-typescript

JavaScript/TypeScript Development TypeScript Configuration { "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "bundler", "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, "skipLibCheck": true, "declaration": true, "outDir": "./dist" }, "include": ["src/*/"], "exclude": ["node_modules", "dist"] }

Type Patterns Utility Types // Pick specific properties type UserPreview = Pick;

// Omit properties type CreateUser = Omit;

// Make all properties optional type PartialUser = Partial;

// Make all properties required type RequiredUser = Required;

// Extract union types type Status = 'pending' | 'active' | 'inactive'; type ActiveStatus = Extract;

Discriminated Unions type Result = | { success: true; data: T } | { success: false; error: Error };

function handleResult(result: Result) { if (result.success) { console.log(result.data); // T } else { console.error(result.error); // Error } }

Generic Constraints interface HasId { id: string | number; }

function findById(items: T[], id: T['id']): T | undefined { return items.find(item => item.id === id); }

Modern JavaScript Destructuring & Spread const { name, ...rest } = user; const merged = { ...defaults, ...options }; const [first, ...others] = items;

Optional Chaining & Nullish Coalescing const city = user?.address?.city ?? 'Unknown'; const count = data?.items?.length ?? 0;

Array Methods const adults = users.filter(u => u.age >= 18); const names = users.map(u => u.name); const total = items.reduce((sum, item) => sum + item.price, 0); const hasAdmin = users.some(u => u.role === 'admin'); const allActive = users.every(u => u.active);

React Patterns // Props with children interface CardProps { title: string; children: React.ReactNode; }

// Event handlers interface ButtonProps { onClick: (event: React.MouseEvent) => void; }

// Custom hooks function useLocalStorage(key: string, initial: T) { const [value, setValue] = useState(() => { const stored = localStorage.getItem(key); return stored ? JSON.parse(stored) : initial; });

useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]);

return [value, setValue] as const; }

Node.js Patterns // ES Modules import { readFile } from 'node:fs/promises'; import { join } from 'node:path';

// Error handling process.on('unhandledRejection', (reason) => { console.error('Unhandled Rejection:', reason); process.exit(1); });