Advanced TypeScript Patterns for Better Code

TypeScript has evolved significantly, offering powerful features that can help developers write more robust and maintainable code. Let's explore some advanced patterns that can elevate your TypeScript skills.

Conditional Types

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

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

Template Literal Types

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint<T extends HttpMethod> = `${T} /api/${string}`;

Mapped Types and Key Remapping

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type User = { name: string; age: number };
type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number; }

Utility Types in Practice

Deep Readonly

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object 
    ? DeepReadonly<T[P]> 
    : T[P];
};

Branded Types

type UserId = string & { __brand: 'UserId' };
type Email = string & { __brand: 'Email' };

function createUser(id: UserId, email: Email) {
  // Type-safe function that prevents mixing up string types
}

Generic Constraints and Inference

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  keys.forEach(key => {
    result[key] = obj[key];
  });
  return result;
}

Real-world Application

These patterns are particularly useful in:

• API client libraries
• Form validation systems
• State management solutions
• Configuration objects

Best Practices

1. Start Simple: Don't over-engineer with complex types initially
2. Document Complex Types: Add comments explaining the purpose
3. Test Your Types: Use type-level tests to ensure correctness
4. Performance Considerations: Be aware of compilation time impact

Conclusion

Advanced TypeScript patterns can significantly improve code quality and developer experience. Use them judiciously to create more expressive and type-safe applications.