Leveraging Generics in TypeScript

TypeScript Fundamental Series

1. Understanding Types in TypeScript
2. Mastering Functions in TypeScript
3. Exploring Interfaces in TypeScript
4. Utilizing Classes in TypeScript
5. Leveraging Generics in TypeScript
6. Advanced Type Features in TypeScript

Welcome to the fifth in our series on the fundamentals of TypeScript. In this article, we'll delve into a concept called Generics. Generics in TypeScript allow you to create reusable components and functions that can operate on different types of data, without sacrificing type safety. Let's explore how they work!

Understanding Generics Generics in TypeScript allow you to create functions, classes, and interfaces that can work with a variety of data types, without sacrificing type safety. This is achieved by using type parameters, which are denoted by angle brackets (<>).

Here's a simple example of a generic function that can work with any type of array:

function getFirstElement<T>(arr: T[]): T {
  return arr[0];
}

let numbers = [1, 2, 3];
let firstNumber = getFirstElement(numbers); // firstNumber is a number

let names = ['Alice', 'Bob', 'Charlie'];
let firstName = getFirstElement(names); // firstName is a string

In this example, the getFirstElement function is generic, and the type parameter T is inferred from the input array. This allows the function to work with arrays of any type, while still ensuring that the return value is of the same type as the elements in the array.

Generic Type Parameters You can define multiple type parameters in a generic function or class. These parameters can be used independently or in relation to each other.

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}

let result = swap(['hello', 42]); // result is ['42', 'hello']

In this example, the swap function has two type parameters, T and U, which are used to represent the types of the elements in the input tuple.

Generic Constraints Sometimes, you may want to restrict the types that can be used with a generic type parameter. This is where generic constraints come in handy.

interface HasName {
  name: string;
}

function printName<T extends HasName>(obj: T): void {
  console.log(obj.name);
}

let person = { name: 'Alice', age: 30 };
printName(person); // Outputs: 'Alice'

let animal = { species: 'Dog', age: 5 };
// printName(animal); // Error: Argument of type '{ species: string; age: number; }' is not assignable to parameter of type 'HasName'.

In this example, the printName function is constrained to work only with objects that have a name property, as defined by the HasName interface.

Generic Classes and Interfaces Generics can also be used with classes and interfaces to create reusable, type-safe data structures.

class GenericBox<T> {
  private item: T;

  set(value: T): void {
    this.item = value;
  }

  get(): T {
    return this.item;
  }
}

let numberBox = new GenericBox<number>();
numberBox.set(42);
let number = numberBox.get(); // number is a number

let stringBox = new GenericBox<string>();
stringBox.set('hello');
let string = stringBox.get(); // string is a string

In this example, the GenericBox class is generic, with a type parameter T. This allows the class to store and retrieve values of any type, while maintaining type safety.

By mastering the use of generics in TypeScript, you can create more flexible, reusable, and type-safe code. In the next blog post, we'll explore some advanced type features, such as union and intersection types, that can further enhance your TypeScript development experience.