Typescript Dev

TypeScript Development Expert

This skill supports TypeScript project development.

🎯 Core Rules

Package Management

• Required: Use pnpm as package manager
• Do not use npm or yarn

Type Safety

• tsconfig.json: strict: true required
• Null Handling: Leverage optional chaining ?. and nullish coalescing ??
• Imports: Use ES modules, avoid require()
• NO ANY: Do not use any type in production code

Best Practices

• Type Inference: Let TypeScript infer when obvious
• Generics: Use for reusable components
• Union Types: Prefer union types over enums for string literals
• Utility Types: Leverage built-in types (Partial, Pick, Omit)

Documentation

• Required: Use TSDoc format for documentation comments
• Public APIs only: Document exported functions, classes, and interfaces
• Self-documenting code: Prefer clear naming over excessive comments
• Document when necessary: Add TSDoc only when the code intent isn't obvious from the signature

🛠️ Code Quality Tools

Development Workflow

# Format code
pnpm run format

# Run linter
pnpm run lint

# Type check
pnpm tsc --noEmit

# Run tests with coverage
pnpm test -- --coverage

🎯 Quality Checklist

Check these during code review:

• Public APIs have TSDoc comments (when intent isn't clear from signature)
• No any type usage
• Proper error handling
• Test coverage above 80%
• Type inference properly leveraged
• Utility Types utilized
• Optional chaining (?.) and Nullish coalescing (??) used
• ES modules used (avoid require())

🚀 Common Patterns

Error Handling

// Good: Clear error types
class ValidationError extends Error {
  constructor(message: string, public field: string) {
    super(message);
    this.name = 'ValidationError';
  }
}

// Good: Result type pattern
type Result<T, E = Error> =
  | { success: true; data: T }
  | { success: false; error: E };

Async/Await

// Good: With error handling
async function fetchUserData(id: string): Promise<Result<UserData>> {
  try {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return { success: false, error: error as Error };
  }
}

Type Guards

// Good: Custom type guard
function isUserProfile(value: unknown): value is UserProfile {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'username' in value
  );
}

💡 Performance Tips

1. Avoid unnecessary re-renders (React)

   • Use React.memo for expensive components
   • Use useMemo / useCallback appropriately

2. Lazy Loading

   • Dynamic imports for code splitting
   • React.lazy() for components

3. Type-only imports

   import type { UserProfile } from './types';
   

🔍 Common Anti-patterns to Avoid

❌ Don't:

// Using any type
function process(data: any) { }

// Implicit any
function getValue(obj, key) { }

// Excessive type assertions
const user = data as User;

✅ Do:

// Proper type definitions
function process(data: UserData) { }

// Explicit types
function getValue<T>(obj: T, key: keyof T) { }

// Use type guards
if (isUser(data)) {
  // data is User here
}