---
name: javascript-typescript
description: JavaScript and TypeScript development with ES6+, Node.js, React, and modern web frameworks. Use for frontend, backend, or full-stack JavaScript/TypeScript projects.
---

# JavaScript/TypeScript Development

## TypeScript Configuration

```json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "skipLibCheck": true,
    "declaration": true,
    "outDir": "./dist"
  }
}
```

## Type Patterns

### Utility Types
```typescript
type UserPreview = Pick<User, 'id' | 'name'>;
type CreateUser = Omit<User, 'id' | 'createdAt'>;
type PartialUser = Partial<User>;
type RequiredUser = Required<User>;
```

### Discriminated Unions
```typescript
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: Error };

function handleResult<T>(result: Result<T>) {
  if (result.success) {
    console.log(result.data);
  } else {
    console.error(result.error);
  }
}
```

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

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

## Modern JavaScript

```javascript
// Destructuring & Spread
const { name, ...rest } = user;
const merged = { ...defaults, ...options };

// Optional Chaining & Nullish Coalescing
const city = user?.address?.city ?? 'Unknown';

// 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);
```

## React Patterns

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

// Custom hooks
function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    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

```typescript
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';

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