Frontend Typescript Anti Patterns

Frontend Typescript Anti Patterns

When to use this skill

• Code reviews
• Refactoring TypeScript code
• Identifying problematic patterns

Workflow

• Search for any usage
• Check for type assertions (as)
• Look for non-null assertions (!)
• Find untyped parameters
• Identify missing return types

Instructions

Anti-Pattern 1: Excessive any

// ❌ Bad
function process(data: any): any {
  return data.value;
}

// ✅ Good
function process<T extends { value: unknown }>(data: T): T['value'] {
  return data.value;
}

Anti-Pattern 2: Type Assertions

// ❌ Bad
const user = data as User;

// ✅ Good
function isUser(data: unknown): data is User {
  return typeof data === 'object' && data !== null && 'id' in data;
}
const user = isUser(data) ? data : null;

Anti-Pattern 3: Non-null Assertions

// ❌ Bad
const name = user!.name;

// ✅ Good
const name = user?.name ?? 'Unknown';

Anti-Pattern 4: Ignoring Strict Null Checks

// ❌ Bad
function getName(user: User): string {
  return user.name; // Could be undefined
}

// ✅ Good
function getName(user: User): string {
  return user.name ?? 'Unknown';
}

Resources

• Avoid any at all costs
• Use type guards instead of assertions
• Enable strict mode