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});
