typescript-refactor

cpa03's avatarfrom cpa03

Safely refactor TypeScript code while maintaining type safety and test coverage. Includes verification steps.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 9, 2026
[Code Review]

When & Why to Use This Skill

The TypeScript Refactor skill is a specialized tool designed to help developers systematically improve code structure and reduce technical debt without altering external behavior. It automates the application of refactoring patterns—such as function extraction and component decoupling—while enforcing a rigorous safety workflow that includes mandatory type-checking and test verification to ensure zero regressions.

Use Cases

  • Extracting complex business or validation logic from bloated functions into dedicated, testable utility functions to improve readability.
  • Decomposing monolithic React components into smaller, modular sub-components to enhance reusability and maintainability.
  • Executing project-wide symbol renames safely by identifying all occurrences across the codebase and verifying the build integrity post-change.
  • Modernizing legacy TypeScript codebases by applying consistent design patterns while maintaining strict type safety and test coverage.
nametypescript-refactor
descriptionSafely refactor TypeScript code while maintaining type safety and test coverage. Includes verification steps.

TypeScript Refactor Skill

Safely refactor TypeScript code with full verification.

Pre-Refactor Checklist

  1. Run current tests to establish baseline:

    npm run test

  2. Run type check:

    npm run typecheck

  3. Note current state as baseline

Refactoring Patterns

Extract Function

// Before
function process(data: Data) {
  // complex validation logic
  if (!data.field1) throw new Error("field1 required");
  if (!data.field2) throw new Error("field2 required");
  // ... more processing
}

// After
function validateData(data: Data): void {
  if (!data.field1) throw new Error("field1 required");
  if (!data.field2) throw new Error("field2 required");
}

function process(data: Data) {
  validateData(data);
  // ... more processing
}

Extract Component (React)

// Before: Large component with repeated patterns
// After: Smaller, focused components with clear props

Rename Symbol

# Find all usages first
grep -r "oldName" --include="*.ts" --include="*.tsx" src/

Post-Refactor Verification

  1. Run type check:

    npm run typecheck

  2. Run tests:

    npm run test

  3. Run linter:

    npm run lint

  4. Build project:

    npm run build

Rules

  • Never change behavior during refactor
  • One refactor type at a time
  • Commit after each successful refactor
  • If tests fail, rollback immediately