TypeScript Advanced Patterns: Generics, Utility Types, and Type Guards Explained

TypeScript has revolutionized the way developers write JavaScript by adding a robust type system that catches errors at compile time. While basic types are straightforward, mastering advanced patterns like generics, utility types, and type guards can significantly improve your code's type safety, reusability, and maintainability. Let's dive deep into these powerful features.

Understanding Generics

Generics allow you to write flexible, reusable code that works with multiple types while maintaining type safety. Think of them as type variables that let you create components that can work over a variety of types rather than a single one.

Basic Generic Functions

Here's a simple example that demonstrates the power of generics:

// Without generics - not type-safe
function getFirstElement(arr: any[]): any {
  return arr[0];
}

// With generics - type-safe and flexible
function getFirstElementGeneric<T>(arr: T[]): T {
  return arr[0];
}

const numbers = [1, 2, 3];
const firstNumber = getFirstElementGeneric(numbers); // Type: number

const strings = ["hello", "world"];
const firstString = getFirstElementGeneric(strings); // Type: string

Generic Constraints

Sometimes you need to restrict what types can be used with your generic. This is where constraints come in:

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): void {
  console.log(`Length: ${item.length}`);
}

logLength("hello"); // Works - strings have length
logLength([1, 2, 3]); // Works - arrays have length
// logLength(123); // Error - numbers don't have length

Generic Classes

Generics shine when building reusable data structures:

class DataStore<T> {
  private data: T[] = [];

  add(item: T): void {
    this.data.push(item);
  }

  get(index: number): T | undefined {
    return this.data[index];
  }

  getAll(): T[] {
    return [...this.data];
  }
}

const numberStore = new DataStore<number>();
numberStore.add(42);
numberStore.add(100);

const userStore = new DataStore<{ name: string; age: number }>();
userStore.add({ name: "Alice", age: 30 });

Utility Types: TypeScript's Built-in Helpers

TypeScript provides several utility types that transform existing types into new ones. These are incredibly useful for common type manipulation patterns.

Partial and Required

Partial<T> makes all properties optional, while Required<T> does the opposite:

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

// All properties become optional
function updateUser(id: number, updates: Partial<User>): void {
  // Can update just name, or just email, or any combination
}

updateUser(1, { name: "Bob" }); // Valid
updateUser(2, { email: "bob@example.com", age: 25 }); // Valid

// All properties become required
type CompleteUser = Required<User>;
// Now 'age' is required, not optional

Pick and Omit

These utilities let you create new types by selecting or excluding properties:

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
}

// Pick only specific properties
type ProductPreview = Pick<Product, "id" | "name" | "price">;

// Omit specific properties
type ProductWithoutId = Omit<Product, "id">;

function createProduct(product: ProductWithoutId): Product {
  return {
    id: Math.random(),
    ...product
  };
}

Record and Readonly

Record<K, T> creates an object type with keys of type K and values of type T:

type UserRole = "admin" | "user" | "guest";

const permissions: Record<UserRole, string[]> = {
  admin: ["read", "write", "delete"],
  user: ["read", "write"],
  guest: ["read"]
};

// Readonly makes all properties immutable
type ImmutableUser = Readonly<User>;

Type Guards: Runtime Type Checking

Type guards are expressions that perform runtime checks to narrow down types within a conditional block.

typeof Type Guards

The simplest form uses JavaScript's typeof operator:

function processValue(value: string | number): string {
  if (typeof value === "string") {
    // TypeScript knows value is a string here
    return value.toUpperCase();
  } else {
    // TypeScript knows value is a number here
    return value.toFixed(2);
  }
}

instanceof Type Guards

Use instanceof for checking class instances:

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

Custom Type Guards

For more complex scenarios, create custom type guard functions:

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

// Custom type guard function
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird): void {
  if (isFish(pet)) {
    pet.swim(); // TypeScript knows pet is Fish
  } else {
    pet.fly(); // TypeScript knows pet is Bird
  }
}

Discriminated Unions

A powerful pattern combining union types with a common discriminant property:

interface SuccessResponse {
  status: "success";
  data: any;
}

interface ErrorResponse {
  status: "error";
  message: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse): void {
  if (response.status === "success") {
    console.log("Data:", response.data);
  } else {
    console.error("Error:", response.message);
  }
}

Practical Real-World Example

Let's combine these patterns in a practical API client:

interface ApiConfig {
  baseUrl: string;
  timeout: number;
  headers?: Record<string, string>;
}

class ApiClient<T> {
  constructor(private config: Readonly<ApiConfig>) {}

  async get<R = T>(endpoint: string): Promise<R> {
    // Implementation
    return {} as R;
  }

  async post<R = T>(endpoint: string, data: Partial<T>): Promise<R> {
    // Implementation
    return {} as R;
  }
}

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

const userApi = new ApiClient<User>({
  baseUrl: "https://api.example.com",
  timeout: 5000
});

// Type-safe API calls
const user = await userApi.get<User>("/users/1");
const created = await userApi.post("/users", { name: "Alice", email: "alice@example.com" });

Conclusion

Mastering generics, utility types, and type guards elevates your TypeScript code from merely typed to truly type-safe and maintainable. Generics provide flexibility without sacrificing type safety, utility types offer powerful type transformations, and type guards ensure runtime safety matches compile-time expectations. By combining these patterns, you can build robust, scalable applications that catch errors before they reach production.