Demystifying TypeScript Generics: A Brief Overview with Examples

Hey LinkedIn community! ???? Ever wondered about the magic behind TypeScript Generics? ?? Let's dive into the world of generics and unravel their power through some practical examples. ???

Understanding TypeScript Generics

In a nutshell, TypeScript Generics provide a way to create reusable, flexible functions and classes. Instead of committing to a specific data type, generics allow us to use a placeholder that gets replaced by a specific type when the function or class is used.

The Basics: Generic Functions

Consider this: you want a function that echoes back whatever value is passed to it, maintaining the type integrity. Here’s where generics shine:

function echo<T>(value: T): T {
  return value;
}

const result = echo("Hello, TypeScript!"); // result is of type string        

Going Beyond: Generic Classes

Generics aren’t limited to functions; they seamlessly extend to classes. Let’s explore a generic Box

class:

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

const numberBox = new Box<number>(42);
const stringBox = new Box<string>("TypeScript is awesome!");

console.log(numberBox.getValue()); // Outputs: 42
console.log(stringBox.getValue()); // Outputs: TypeScript is awesome!        

Practical Examples: Utility of TypeScript Generics

1. Array Reversal Function:

function reverseArray<T>(array: T[]): T[] {
  return array.reverse();
}

const reversedNumbers = reverseArray([1, 2, 3, 4, 5]); // reversedNumbers is of type number[]        

1. Pair Utility:

class Pair<T, U> {
  constructor(public first: T, public second: U) {}
}

const nameAndAge = new Pair<string, number>("John Doe", 30);        

Conclusion: Elevating TypeScript with Generics

Understanding TypeScript Generics opens up a realm of possibilities for writing more adaptable and reusable code. Whether you're dealing with arrays, classes, or creating your utility functions, generics empower you to write code that is both flexible and type-safe.

Curious for more insights? ?? Dive into the full exploration in our latest blog [link]. Happy coding, TypeScript enthusiasts! ????