Advanced TypeScript Patterns for Clean Code

Advanced TypeScript Patterns for Clean Code

TypeScript is a powerful superset of JavaScript that brings static typing and advanced features to the language. It allows developers to write more robust and maintainable code by catching errors at compile-time and providing better tooling support. However, as projects grow in size and complexity, it becomes crucial to apply advanced TypeScript patterns to ensure clean code and improve the overall development experience.

In this blog post, we will explore some advanced TypeScript patterns that can help you write cleaner and more maintainable code. We will cover topics such as advanced type usage, functional programming techniques, and design patterns.

Advanced Type Usage

1. Union Types and Discriminated Unions

Union types allow you to define a variable that can hold values of multiple types. This is particularly useful when dealing with variables that can have different possible values. Discriminated unions, on the other hand, are a way to create a type that has a common property, known as a discriminator, which allows TypeScript to narrow down the possible types based on that property.

type Shape = Square | Circle;

interface Square {
  kind: "square";
  size: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

function area(shape: Shape): number {
  switch (shape.kind) {
    case "square":
      return shape.size * shape.size;
    case "circle":
      return Math.PI * shape.radius * shape.radius;
  }
}

2. Conditional Types

Conditional types allow you to define types that depend on a condition. This can be useful when you want to create a type that is based on the properties of another type.

type NonNullable<T> = T extends null | undefined ? never : T;

function processValue<T>(value: NonNullable<T>) {
  // ...
}

Functional Programming Techniques

1. Immutability

Immutability is a core concept in functional programming that promotes the use of immutable data structures. By avoiding mutations, you can reduce complexity and make your code more predictable and easier to reason about.

interface Person {
  readonly name: string;
  readonly age: number;
}

function updatePerson(person: Person, name: string, age: number): Person {
  return { ...person, name, age };
}

2. Higher-Order Functions

Higher-order functions are functions that either take one or more functions as arguments or return a function. They enable you to write more modular and reusable code by abstracting common patterns.

function map<T, U>(array: T[], mapper: (item: T) => U): U[] {
  const result: U[] = [];
  for (const item of array) {
    result.push(mapper(item));
  }
  return result;
}

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = map(numbers, (x) => x * x);

Design Patterns

1. Singleton Pattern

The Singleton pattern restricts the instantiation of a class to a single object, ensuring that there is only one instance of the class throughout the application.

class Logger {
  private static instance: Logger;

  private constructor() {
    // ...
  }

  public static getInstance(): Logger {
    if (!Logger.instance) {
      Logger.instance = new Logger();
    }
    return Logger.instance;
  }

  public log(message: string) {
    // ...
  }
}

const logger = Logger.getInstance();
logger.log("Hello, world!");

2. Strategy Pattern

The Strategy pattern allows you to define a family of algorithms, encapsulate each one, and make them interchangeable. This pattern is useful when you have multiple algorithms that can be used interchangeably based on a specific context.

interface SortingStrategy {
  sort(array: number[]): number[];
}

class BubbleSort implements SortingStrategy {
  sort(array: number[]): number[] {
    // ...
  }
}

class QuickSort implements SortingStrategy {
  sort(array: number[]): number[] {
    // ...
  }
}

class Sorter {
  private strategy: SortingStrategy;

  constructor(strategy: SortingStrategy) {
    this.strategy = strategy;
  }

  public setStrategy(strategy: SortingStrategy) {
    this.strategy = strategy;
  }

  public sort(array: number[]): number[] {
    return this.strategy.sort(array);
  }
}

const sorter = new Sorter(new BubbleSort());
sorter.sort([3, 1, 4, 1, 5]);

sorter.setStrategy(new QuickSort());
sorter.sort([3, 1, 4, 1, 5]);

Conclusion

In this blog post, we have explored some advanced TypeScript patterns that can help you write cleaner and more maintainable code. We have covered advanced type usage, functional programming techniques, and design patterns. By applying these patterns, you can improve the overall development experience, reduce bugs, and make your code easier to understand and maintain.

TypeScript provides a powerful set of tools and features that enable you to write high-quality code. By leveraging these advanced patterns, you can take full advantage of TypeScript's capabilities and write clean, robust, and maintainable code. Happy coding!