JavaScript/TypeScript Development

TypeScript Configuration

json
1{
2  "compilerOptions": {
3    "target": "ES2022",
4    "module": "ESNext",
5    "moduleResolution": "bundler",
6    "strict": true,
7    "noUncheckedIndexedAccess": true,
8    "noImplicitOverride": true,
9    "skipLibCheck": true,
10    "declaration": true,
11    "outDir": "./dist"
12  },
13  "include": ["src/**/*"],
14  "exclude": ["node_modules", "dist"]
15}

Type Patterns

Utility Types

typescript
1// Pick specific properties
2type UserPreview = Pick<User, 'id' | 'name'>;
3
4// Omit properties
5type CreateUser = Omit<User, 'id' | 'createdAt'>;
6
7// Make all properties optional
8type PartialUser = Partial<User>;
9
10// Make all properties required
11type RequiredUser = Required<User>;
12
13// Extract union types
14type Status = 'pending' | 'active' | 'inactive';
15type ActiveStatus = Extract<Status, 'active' | 'pending'>;

Discriminated Unions

typescript
1type Result<T> =
2  | { success: true; data: T }
3  | { success: false; error: Error };
4
5function handleResult<T>(result: Result<T>) {
6  if (result.success) {
7    console.log(result.data); // T
8  } else {
9    console.error(result.error); // Error
10  }
11}

Generic Constraints

typescript
1interface HasId {
2  id: string | number;
3}
4
5function findById<T extends HasId>(items: T[], id: T['id']): T | undefined {
6  return items.find(item => item.id === id);
7}

Modern JavaScript

Destructuring & Spread

javascript
1const { name, ...rest } = user;
2const merged = { ...defaults, ...options };
3const [first, ...others] = items;

Optional Chaining & Nullish Coalescing

javascript
1const city = user?.address?.city ?? 'Unknown';
2const count = data?.items?.length ?? 0;

Array Methods

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

React Patterns

typescript
1// Props with children
2interface CardProps {
3  title: string;
4  children: React.ReactNode;
5}
6
7// Event handlers
8interface ButtonProps {
9  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
10}
11
12// Custom hooks
13function useLocalStorage<T>(key: string, initial: T) {
14  const [value, setValue] = useState<T>(() => {
15    const stored = localStorage.getItem(key);
16    return stored ? JSON.parse(stored) : initial;
17  });
18
19  useEffect(() => {
20    localStorage.setItem(key, JSON.stringify(value));
21  }, [key, value]);
22
23  return [value, setValue] as const;
24}

Node.js Patterns

typescript
1// ES Modules
2import { readFile } from 'node:fs/promises';
3import { join } from 'node:path';
4
5// Error handling
6process.on('unhandledRejection', (reason) => {
7  console.error('Unhandled Rejection:', reason);
8  process.exit(1);
9});