Mastering TypeScript: Advanced Patterns for Better Code

TypeScript has evolved significantly over the years, introducing powerful features that enable developers to write more robust and maintainable code. In this article, we'll explore advanced patterns that can elevate your TypeScript skills.

Conditional Types

Conditional types allow you to create types that depend on a condition, making your type system more flexible and expressive.

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

// Usage
type StringResponse = ApiResponse<string> // { message: string }
type UserResponse = ApiResponse<User> // { data: User }

Template Literal Types

Template literal types enable you to create new string literal types by combining existing ones.

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

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

Mapped Types

Mapped types allow you to create new types by transforming properties of existing types.

type Optional<T> = {
  [K in keyof T]?: T[K]
}

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K]
}

Utility Types in Practice

TypeScript provides many built-in utility types that can simplify common type transformations.

Pick and Omit

interface User {
  id: string
  name: string
  email: string
  password: string
}

type PublicUser = Omit<User, 'password'>
type UserCredentials = Pick<User, 'email' | 'password'>

Record and Partial

type UserRoles = Record<string, 'admin' | 'user' | 'guest'>
type PartialUser = Partial<User>

Advanced Function Types

TypeScript's function type system is incredibly powerful and can help you create more type-safe APIs.

Function Overloads

function processData(data: string): string
function processData(data: number): number
function processData(data: boolean): boolean
function processData(data: unknown): unknown {
  return data
}

Generic Constraints

interface Lengthwise {
  length: number
}

function logLength<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}

Type Guards

Type guards help TypeScript understand the type of a variable at runtime.

function isString(value: unknown): value is string {
  return typeof value === 'string'
}

function processValue(value: unknown) {
  if (isString(value)) {
    // TypeScript knows value is string here
    console.log(value.toUpperCase())
  }
}

Conclusion

These advanced TypeScript patterns provide powerful tools for creating more robust and maintainable applications. By mastering these concepts, you'll be able to leverage TypeScript's full potential and write code that's both type-safe and expressive.

Remember, the key to mastering TypeScript is practice. Start incorporating these patterns into your projects gradually, and you'll soon find yourself writing more confident and error-free code.