10 Prompts for Generating JavaScript and TypeScript Code

Create a React functional component in TypeScript called `UserCard`. It accepts `name: string`, `email: string`, and optional `avatarUrl?: string`. Include a default avatar if `avatarUrl` is not provided. Use CSS-in-JS with a `style` object (no external libraries). Export the component as default.

import React from 'react';

interface UserCardProps {
  name: string;
  email: string;
  avatarUrl?: string;
}

const UserCard: React.FC<UserCardProps> = ({ name, email, avatarUrl }) => {
  const styles = {
    card: { border: '1px solid #ddd', padding: '16px', borderRadius: '8px' },
    avatar: { width: '50px', height: '50px', borderRadius: '50%' },
  };

  return (
    <div style={styles.card}>
      <img
        src={avatarUrl || 'https://via.placeholder.com/50'}
        alt={name}
        style={styles.avatar}
      />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
};

export default UserCard;

Write a TypeScript Express middleware function `authMiddleware` that:
- Reads the `Authorization` header (format: `Bearer <token>`)
- Verifies the JWT using a secret from environment variable `JWT_SECRET`
- If valid, attaches decoded payload to `req.user` (extend Express Request type)
- If invalid or missing, returns 401 with a JSON error message
- Use `jsonwebtoken` library

import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

declare global {
  namespace Express {
    interface Request {
      user?: { id: string; email: string };
    }
  }
}

export const authMiddleware = (req: Request, res: Response, next: NextFunction) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Missing or invalid token' });
  }
  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET!) as { id: string; email: string };
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Token invalid or expired' });
  }
};

Define a TypeScript type `DeepPartial<T>` that recursively makes every property in `T` optional, including nested objects and arrays. Use conditional types and mapped types. Provide a usage example with a `User` interface containing nested `address` and `settings`.

type DeepPartial<T> = T extends object
  ? { [P in keyof T]?: DeepPartial<T[P]> }
  : T;

interface User {
  id: number;
  name: string;
  address: { street: string; city: string };
}

const partialUser: DeepPartial<User> = { name: 'Alice' }; // valid
const partialWithAddress: DeepPartial<User> = { address: { city: 'NYC' } }; // valid

Implement a custom React hook `useDebounce<T>(value: T, delay: number): T` that returns the debounced value after the delay. Use `useState` and `useEffect`. Ensure it cleans up the timer on unmount. Show a usage example in a search input component.

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Create a TypeScript function `retryAsync<T>(fn: () => Promise<T>, maxRetries: number = 3): Promise<T>` that:
- Calls `fn`, and if it throws, waits for `2^attempt` seconds before retrying
- Stops after `maxRetries` attempts and throws the last error
- Provide a usage example with a mock API call that fails intermittently

async function retryAsync<T>(fn: () => Promise<T>, maxRetries: number = 3): Promise<T> {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      if (attempt === maxRetries - 1) throw error;
      const delay = Math.pow(2, attempt) * 1000;
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
  throw new Error('Unexpected error');
}

// Usage
const fetchData = async () => {
  const response = await fetch('/api/data');
  if (!response.ok) throw new Error('Network error');
  return response.json();
};

retryAsync(fetchData).then(data => console.log(data));

Write a Zod schema `userRegistrationSchema` in TypeScript that validates:
- `email`: valid email format
- `password`: min 8 chars, must contain a number and a special character
- `age`: optional number, must be between 18 and 120
- `name`: string, min 2 chars, max 50 chars
Include a parse example with error handling.

import { z } from 'zod';

const userRegistrationSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z
    .string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/[0-9]/, 'Must contain a number')
    .regex(/[!@#$%^&*]/, 'Must contain a special character'),
  age: z.number().min(18).max(120).optional(),
  name: z.string().min(2).max(50),
});

const result = userRegistrationSchema.safeParse({
  email: 'test@example.com',
  password: 'Hello1!',
  name: 'Alice',
});

if (!result.success) {
  console.log(result.error.flatten());
}

Create a TypeScript Express route `POST /upload` that:
- Uses `multer` to accept a single file with field name `file`
- Saves the file to `./uploads/` with a unique filename (timestamp + original extension)
- Returns JSON with `{ filename, size }` on success
- Limits file size to 5 MB and only allows images (jpeg, png, gif)
- Handles multer errors gracefully with a 400 status

import multer from 'multer';
import path from 'path';
import express from 'express';

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    const uniqueName = Date.now() + path.extname(file.originalname);
    cb(null, uniqueName);
  },
});

const upload = multer({
  storage,
  limits: { fileSize: 5 * 1024 * 1024 },
  fileFilter: (req, file, cb) => {
const allowed = /jpeg

|jpg|png|gif/;
    const extname = allowed.test(path.extname(file.originalname).toLowerCase());
    if (extname) {
      cb(null, true);
    } else {
      cb(new Error('Only images allowed'));
    }
  },
});

const app = express();
app.post('/upload', (req, res) => {
  upload.single('file')(req, res, (err) => {
    if (err) return res.status(400).json({ error: err.message });
    res.json({ filename: req.file!.filename, size: req.file!.size });
  });
});

Implement a TypeScript function `sortByKey<T>(arr: T[], key: keyof T, order: 'asc' | 'desc' = 'asc'): T[]` that returns a new sorted array without mutating the original. Handle string and number values. Provide a usage example with an array of `{ name: string, age: number }`.

function sortByKey<T>(arr: T[], key: keyof T, order: 'asc' | 'desc' = 'asc'): T[] {
  return [...arr].sort((a, b) => {
    const aVal = a[key];
    const bVal = b[key];
    if (typeof aVal === 'string' && typeof bVal === 'string') {
      return order === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
    }
    if (typeof aVal === 'number' && typeof bVal === 'number') {
      return order === 'asc' ? aVal - bVal : bVal - aVal;
    }
    return 0;
  });
}

const users = [{ name: 'Bob', age: 30 }, { name: 'Alice', age: 25 }];
const sorted = sortByKey(users, 'age', 'asc');
console.log(sorted); // [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]

Build a React context `ThemeContext` in TypeScript that:
- Has a state `theme: 'light' | 'dark'`
- Provides a `toggleTheme` function
- Includes a `ThemeProvider` component that wraps children
- Create a custom hook `useTheme` for consuming the context
- Use `createContext` with a default value of `undefined` and throw an error if used outside provider

import React, { createContext, useContext, useState, ReactNode } from 'react';

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = (): ThemeContextType => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

Create a Node.js script `pretty-json.js` that:
- Accepts a file path as a command-line argument (e.g., `node pretty-json.js data.json`)
- Reads the file, parses it as JSON, and prints it indented with 2 spaces
- If the file doesn’t exist or JSON is invalid, print a helpful error message to stderr and exit with code 1
- Use only Node.js built-in modules (`fs`, `path`, `process`)

const fs = require('fs');
const path = require('path');

if (process.argv.length < 3) {
  console.error('Usage: node pretty-json.js <file>');
  process.exit(1);
}

const filePath = path.resolve(process.argv[2]);
try {
  const data = fs.readFileSync(filePath, 'utf8');
  const json = JSON.parse(data);
  console.log(JSON.stringify(json, null, 2));
} catch (err) {
  if (err.code === 'ENOENT') {
    console.error('Error: File not found');
  } else {
    console.error('Error: Invalid JSON');
  }
  process.exit(1);
}