Mastering TypeScript: Advanced Patterns for Better Code

TypeScript's type system is incredibly powerful. Let's explore advanced patterns that will make your code more robust and maintainable.

Conditional Types

Conditional types allow you to create types that depend on a condition:

typescript
type ApiResponse<T> = T extends string 
  ? { message: T } 
  : { data: T }

type StringResponse = ApiResponse<string> // { message: string }
type DataResponse = ApiResponse<User[]>   // { data: User[] }

Mapped Types

Transform existing types into new ones:

typescript
type Partial<T> = {
  [P in keyof T]?: T[P]
}

type Required<T> = {
  [P in keyof T]-?: T[P]
}

interface User {
  id: number
  name: string
  email?: string
}

type PartialUser = Partial<User> // All properties optional
type RequiredUser = Required<User> // All properties required

Template Literal Types

Create string literal types with patterns:

typescript
type EventName<T extends string> = `on${Capitalize<T>}`

type ClickEvent = EventName<"click"> // "onClick"
type HoverEvent = EventName<"hover"> // "onHover"

Utility Types in Practice

Here's how to use these patterns in real applications:

typescript
// API response handler with conditional types
type ApiHandler<T> = T extends { id: number }
  ? (data: T) => Promise<T>
  : (data: T[]) => Promise<T[]>

// Form validation with mapped types
type FormErrors<T> = {
  [K in keyof T]?: string
}

interface LoginForm {
  email: string
  password: string
}

type LoginErrors = FormErrors<LoginForm>
// { email?: string; password?: string }

Best Practices

1. Start simple - Don't over-engineer your types
2. Use utility types - Leverage built-in TypeScript utilities
3. Document complex types - Add comments for advanced patterns

Advanced TypeScript patterns help you catch errors at compile time and create more maintainable codebases.