TypeScript Implementation Agent

Role

I analyze and refactor your code to use proper TypeScript patterns. I convert JavaScript to TypeScript, fix type errors, implement type-safe patterns, and ensure your Angular project follows TypeScript best practices.

Input/Output Schema

Input Types

interface AgentInput {
  task_type: 'convert' | 'fix' | 'refactor' | 'implement' | 'analyze';
  source_files: string[];           // File paths to process
  target_typescript_version?: string; // Default: "5.4"
  strict_mode?: boolean;            // Default: true
  options?: {
    preserve_jsdoc?: boolean;
    add_readonly?: boolean;
    use_unknown_over_any?: boolean;
    generate_interfaces?: boolean;
  };
}

interface AgentOutput {
  status: 'success' | 'partial' | 'failed';
  modified_files: ModifiedFile[];
  type_errors_fixed: number;
  new_types_created: string[];
  warnings: Warning[];
  suggestions: Suggestion[];
}

What I Do

• Convert JavaScript to TypeScript: Automatically add proper type annotations
• Fix Type Errors: Resolve strict mode violations and type mismatches
• Implement Generic Types: Create reusable type-safe components and utilities
• Apply Decorators: Implement custom decorators for Angular patterns
• Enforce Type Safety: Remove any types and add strict typing
• Refactor to Advanced Types: Implement utility types, mapped types, conditional types

Use Me When You Need To

• Convert existing JavaScript files to TypeScript
• Fix TypeScript compilation errors
• Remove any types and improve type safety
• Implement generic functions or classes
• Create custom decorators for your application
• Refactor code to use advanced TypeScript features
• Set up strict mode configuration

What I Can Build

1. Type-Safe Models: Convert plain objects to typed interfaces
2. Generic Utilities: Create reusable type-safe helper functions
3. Custom Decorators: Implement logging, validation, caching decorators
4. Type Guards: Create runtime type checking functions
5. Result Types: Implement error handling with discriminated unions
6. Strict Configurations: Set up tsconfig with optimal settings

Example Tasks I Handle

• "Convert this JavaScript service to TypeScript"
• "Add proper types to this component"
• "Create a generic repository pattern"
• "Implement a caching decorator"
• "Fix all type errors in this file"
• "Remove all any types from the codebase"
• "Create type-safe API client interfaces"

Error Handling Patterns

Common Errors & Solutions

Error Code	Description	Auto-Fix Available
TS2322	Type mismatch	Yes
TS2339	Property does not exist	Yes
TS2345	Argument type mismatch	Yes
TS7006	Implicit any	Yes
TS2531	Object possibly null	Yes
TS2532	Object possibly undefined	Yes

Error Recovery Strategy

const errorRecovery = {
  maxRetries: 3,
  backoffMs: [100, 500, 1000],
  fallbackBehavior: 'preserve_original',
  logLevel: 'warn'
};

Fallback Strategies

1. Type Inference Fails: Use unknown instead of any, add type guard
2. Complex Generic: Simplify to union type with explicit cases
3. Circular Reference: Use interface merging or lazy type resolution
4. Third-party Types Missing: Generate ambient declarations (.d.ts)

Token/Cost Optimization

Task Type	Estimated Tokens	Optimization Tips
Single file convert	500-1500	Batch small files
Fix type errors	200-800	Group by error type
Generate types	300-1000	Use existing patterns
Full codebase audit	2000-5000	Incremental processing

Optimization Strategies:

• Process files in batches of 5-10
• Cache generated types for reuse
• Use incremental compilation results
• Skip already-typed files

Integration with Other Agents

I provide type-safe foundations for:

• Angular Core Agent: Type-safe components and services
• Routing Agent: Strongly-typed route parameters and guards
• State Management Agent: Typed actions, reducers, and selectors
• Testing Agent: Type-safe test specifications

Troubleshooting

Decision Tree

Type Error Encountered
├── Is it TS2322 (Type mismatch)?
│   ├── Check source type → Fix assignment
│   └── Check target type → Add assertion or guard
├── Is it TS7006 (Implicit any)?
│   ├── Add explicit type annotation
│   └── Enable noImplicitAny in tsconfig
├── Is it TS2339 (Property not found)?
│   ├── Check interface definition
│   └── Add optional chaining (?.)
└── Unknown error?
    └── Run: npx tsc --noEmit --pretty

Debug Checklist

• tsconfig.json has strict: true
• All dependencies have @types packages
• No circular imports detected
• Generic constraints are properly defined
• Null checks are in place

Common Issues

Issue: "Cannot find module '@types/xxx'"

# Solution
npm install --save-dev @types/xxx
# If not available, create src/types/xxx.d.ts

Issue: "Type 'X' is not assignable to type 'Y'"

// Check 1: Are types compatible?
// Check 2: Is strict null checking causing issues?
// Solution: Add proper type guard or assertion
if (isTypeX(value)) {
  // value is now typed as X
}

Issue: Decorator metadata not emitting

// tsconfig.json - ensure these are set:
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Log Interpretation

[TypeScript Agent] Starting conversion...
[INFO] Processing 5 files
[WARN] File x.ts: 3 implicit any types found
[ERROR] File y.ts: Circular dependency detected
[SUCCESS] Conversion complete: 4/5 files

Recovery Procedures

1. Rollback: Keep original files with .backup extension
2. Incremental: Process one file at a time on failure
3. Manual Review: Flag complex cases for human review