Red-Green-Refactor (TDD) Skill: TypeScript Edition

The Three-Phase Cycle

Phase 1: Red (Establish Failure)

1. Write One Test: Create a single test case (e.g., in Vitest or Jest) for the next small piece of behavior.
2. Execute & Fail: Run the test. It must fail.
3. Verify: Ensure the failure is related to the missing logic (e.g.,

   ReferenceError: add is not defined

   ) and not a configuration error.

Phase 2: Green (Minimal Pass)

1. Minimal Implementation: Write the simplest code that satisfies the test. Do not build for the future; focus strictly on the current "Red" test.
2. Run Tests: Execute the suite. All tests must be Green.
3. Evidence: The transition from Red to Green is the "Proof of Work" for the developer.

Phase 3: Refactor (Clean Up)

1. Clean Up: Improve naming, remove duplication, and optimize the code written in Phase 2.
2. Safety Net: Rerun the tests after every change. If they turn Red, revert the change immediately.

Core Operational Rules

1. No "Horizontal Splurging"

• Write 1 Test -> See it Fail -> Write 1 Fix -> See it Pass.
• Repeat this loop for every sub-feature.

2. Impose Backpressure

3. Verification of Integrity

Example Workflow (TypeScript + Vitest)

// math.test.ts
import { describe, it, expect } from 'vitest';
import { add } from './math';

describe('add', () => {
  it('should sum two numbers', () => {
    expect(add(2, 2)).toBe(4); // Fails: ReferenceError: add is not defined
  });
});

// math.ts
export const add = (a: any, b: any) => {
  return 4; // Passes: Minimal code to satisfy the test
};

// math.ts
/**
 * Sums two numbers with explicit type safety.
 */
export const add = (a: number, b: number): number => {
  return a + b; // Passes: Proper implementation with safety net
};