Understanding basics of Typescript generics

TypeScript is a popular programming language that is a superset of JavaScript. One of the key features of TypeScript is generics. In simple terms, generics are a way of writing code that is flexible enough to work with different types of data. In this article, we’ll explain what generics are and how they work in TypeScript.

What are Generics? Generics in TypeScript allows us to create functions, classes, and interfaces that work with a variety of data types. Instead of specifying a specific data type, we use a placeholder called a type parameter. The type parameter represents any type that can be used in place of the placeholder.

For example, let’s say we want to create a function that takes an array of any type and returns the first element of the array. We can use generics to achieve this flexibility. Here’s what the function would look like:

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

In this example, the T represents a type parameter. We're saying that the getFirstElement function can take an array of any type T and return the first element of that array.

Let’s take a closer look at how this function works. First, we declare the function and specify the type parameter with the <T> syntax. Then, we define the function parameters. In this case, we're accepting an array of type T with the array: T[] syntax. Finally, we define the return type of the function with : T, which means that the function returns a value of type T.

Using Generics with Interfaces and Classes Generics can also be used with interfaces and classes. Here’s an example of how we can use generics with an interface:

interface Pair<T, U> {
  first: T;
  second: U;
}

const myPair: Pair<number, string> = { first: 1, second: "hello" };

In this example, we define an interface called Pair that has two type parameters: T and U. The interface defines two properties, first of type T and second of type U. We then create an instance of Pair with type parameters number and string.

Generics can also be used with classes. Here’s an example of a generic class that uses the Pair interface:

class PairList<T, U> {
  private pairs: Pair<T, U>[] = [];
  addPair(pair: Pair<T, U>) {
      this.pairs.push(pair);
    }
    getPairs() {
      return this.pairs;
    }
  }
const pairList = new PairList<number, string>();
pairList.addPair({ first: 1, second: "hello" });
pairList.addPair({ first: 2, second: "world" });
console.log(pairList.getPairs());

In this example, we define a class called PairList that has two type of parameters, T and U. The class has two methods, addPair and getPairs, that work with instances of the Pair interface. We then create an instance of PairList with type parameters number and string, and use the addPair method to add two Pair instances to the list. Finally, we use the getPairs method to retrieve the list of pairs and log it to the console.

Conclusion Generics are a powerful feature of TypeScript that allow us to write flexible and reusable code that can work with a variety of data types.