Using Generics in TypeScript

TypeScript is a powerful programming language that is built on top of JavaScript. One of its key features is the use of generics, which allow developers to write reusable code that can work with multiple data types. In this tutorial, we will explore how to use generics in TypeScript.

What are Generics?

Generics are a way of creating reusable code that can work with different types of data. They allow you to write code that is more flexible and can work with a variety of data types without having to write duplicate code for each type.

In TypeScript, generics are indicated by using angle brackets (<>) to specify a type parameter. For example, consider the following function that takes an array of any type and returns the first element:

function getFirstElement(arr: any[]): any {
  return arr[0];
}

This function works fine, but it is not very specific about the types of data it works with. If we wanted to ensure that the array contains only strings, we would have to manually check each element. This is where generics come in.

We can use generics to create a more specific version of the function that only works with arrays of a certain type. Here is an example of how to use a generic type parameter:

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

In this version of the function, we have added a type parameter T in angle brackets, which indicates that arr is an array of type T. We have also changed the return type to T so that the function returns the same type as the array.

Using Generics with Interfaces

Interfaces are another feature of TypeScript that can benefit from the use of generics. An interface is a way of defining a contract that specifies the shape of an object. For example, consider the following interface for a simple person object:

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

We can use this interface to define a function that takes a person object as a parameter:

function greet(person: Person): void {
  console.log(`Hello, ${person.name}!`);
}

This function works fine, but what if we wanted to use the same function with different types of objects that share the same shape as a person object? We could create a separate interface for each object type, but this would be cumbersome and repetitive.

Instead, we can use generics to create a more flexible version of the interface that can work with any object that has the same shape as a person object. Here is an example of how to use generics with an interface:

interface Greetable<T> {
  name: T;
}

function greet<T extends Greetable<string>>(person: T): void {
  console.log(`Hello, ${person.name}!`);
}

In this version of the function, we have created a new interface called Greetable with a type parameter T that represents the type of the name property. We have also changed the function signature to use the extends keyword to specify that T must be a subtype of Greetable<string>, which means that it must have a name property of type string.

Conclusion

Generics are a powerful feature of TypeScript that can help you write more flexible and reusable code. They allow you to create functions, classes, and interfaces that can work with different types of data without having to write duplicate code for each type. By using generics, you can write more efficient and maintainable code that is easier to read and understand.