Generics

TypeScript generics is a powerful feature that allows developers to write generic functions, classes, and interfaces. It is a way of creating code that can work with any type of data without having to specify the specific type at compile time. In this article, we will explore what TypeScript generics are, how they work, and how they can be used in your projects.

What are TypeScript Generics?

TypeScript generics is a feature that allows you to write code that can work with any data type without having to specify the specific type at compile time. It is similar to Java's generics or C#'s generics, but it has some unique features and syntax.

TypeScript generics are defined using angle brackets < > followed by a comma-separated list of type parameters. For example:

function identity<T>(x: T): T {
  return x;
}

In this function, the type parameter T is used to specify that the input and output of the function can be any type of data.

How do TypeScript Generics work?

TypeScript generics work by using type variables instead of specific types. When a generic function or class is called, the compiler infers the type of the arguments and returns a value with that type.

For example, let's say we have an array of strings:

const arr = ['apple', 'banana', 'orange'];

We can use the identity function from our previous example to create a new array where each element is the same as its corresponding element in the original array:

const newArr = arr.map(identity);

In this case, TypeScript infers that the input and output types of identity are both strings.

TypeScript also allows you to specify type parameters for classes and interfaces. For example, we can create a generic class called Pair with two properties:

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

This class can be used to create pairs of any type of data. For example:

const pair1 = new Pair<string, number>('hello', 42);
const pair2 = new Pair<number, boolean>(3.14, true);

How can TypeScript Generics be used in your projects?

TypeScript generics can be used to create reusable code that works with any data type without having to specify the specific type at compile time. This can save you a lot of time and effort when writing complex applications that need to work with different types of data.

For example, let's say we have a function that calculates the sum of an array of numbers:

function sum(arr: number[]): number {
  return arr.reduce((acc, curr) => acc + curr);
}

This function works only with arrays of numbers. However, we can use TypeScript generics to create a more generic version of this function that works with arrays of any type:

function sum<T>(arr: T[]): T {
  return arr.reduce((acc, curr) => acc + curr);
}

This function uses the <T> syntax to specify that it can work with any array of any type of data. The compiler will infer the type of the input and output based on the input argument.

Another use case for TypeScript generics is in creating reusable classes and interfaces. For example, let's say we have a class called Node that represents a node in a tree:

class Node<T> {
  value: T;
  left: Node<T> | undefined;
  right: Node<T> | undefined;
}

This class is generic and can be used to create nodes that contain any type of data. We can use this class to create a tree that contains nodes with different types of data:

const node1 = new Node('apple');
const node2 = new Node(3);
const node3 = new Node({ name: 'John', age: 30 });

TypeScript generics is a powerful feature that allows you to write reusable code that works with any data type without having to specify the specific type at compile time. It can save you a lot of time and effort when writing complex applications that need to work with different types of data. By using TypeScript generics, you can create more robust and flexible applications that are easier to maintain and extend.