TypeScript/JavaScript Development Skill

Purpose

This skill guides the development of TypeScript and JavaScript code with attention to:

• Type safety and proper typing patterns
• Modern ES6+ features and patterns
• Code organization and maintainability
• Error handling and validation
• Performance considerations

TypeScript Best Practices

Type Safety

• Use strict TypeScript configuration
• Prefer unknown over any when type is truly unknown
• Use discriminated unions for complex state
• Define explicit return types for functions
• Use generics for reusable type patterns

Code Organization

• Keep files focused and single-purpose
• Use barrel exports (index.ts) for clean imports
• Separate types/interfaces into dedicated files
• Use path aliases for clean imports (@/lib, @/components)

Modern Patterns

• Use async/await over raw Promises
• Prefer const and let over var
• Use destructuring for cleaner code
• Use optional chaining (?.) and nullish coalescing (??)
• Use template literals for string interpolation

Error Handling

• Use custom error classes for domain errors
• Always handle Promise rejections
• Validate inputs at boundaries (API routes, form handlers)
• Use Zod or similar for runtime validation

React/Next.js Patterns

• Use functional components with hooks
• Prefer server components where possible
• Use React Query for data fetching
• Implement proper loading and error states
• Use proper key props in lists

Commands Reference

Type Checking

# Full type check
npx tsc --noEmit

# Watch mode
npx tsc --noEmit --watch

# Check specific files
npx tsc --noEmit src/lib/*.ts

Linting

# Run ESLint
npm run lint

# Fix auto-fixable issues
npm run lint -- --fix

# Check specific files
npx eslint src/components/**/*.tsx

Testing

# Run all tests
npm test

# Watch mode
npm test -- --watch

# Coverage report
npm test -- --coverage

# Specific test file
npm test -- path/to/test.ts

Building

# Development build
npm run dev

# Production build
npm run build

# Analyze bundle
npm run build -- --analyze

Code Style Guidelines

Naming Conventions

• Variables/Functions: camelCase
• Types/Interfaces: PascalCase
• Constants: UPPER_SNAKE_CASE
• Files: kebab-case or PascalCase for components
• Boolean variables: use is/has/should prefix

Import Order

1. External dependencies (react, next)
2. Internal aliases (@/lib, @/components)
3. Relative imports (./utils)
4. Type imports (type { ... })

Function Style

// Prefer arrow functions for callbacks
const handleClick = () => { ... };

// Use function declaration for hoisting needs
function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Use async/await
async function fetchData(): Promise<Data> {
  const response = await fetch(url);
  return response.json();
}

Type Definitions

// Use interfaces for objects
interface User {
  id: string;
  name: string;
  email: string;
}

// Use types for unions/intersections
type Status = 'pending' | 'active' | 'completed';

// Use generics for reusable patterns
type ApiResponse<T> = {
  success: boolean;
  data?: T;
  error?: string;
};