TypeScript Refactor Skill

Name: typescript-refactor
Rating: 76
Author: cpa03

Safely refactor TypeScript code with full verification.

Pre-Refactor Checklist

•
Run current tests to establish baseline:
bash
```
npm run test
```
•
Run type check:
bash
```
npm run typecheck
```
•
Note current state as baseline

Refactoring Patterns

Extract Function

typescript

// 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)

typescript

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

Rename Symbol

bash

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

Post-Refactor Verification

•
Run type check:
bash
```
npm run typecheck
```
•
Run tests:
bash
```
npm run test
```
•
Run linter:
bash
```
npm run lint
```
•
Build project:
bash
```
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