Generics in TypeScript

May 31, 2024

Generics in TypeScript provide a way to create reusable and flexible components. They allow you to write functions, classes, and interfaces that can work with a variety of types rather than a single one.

Generics are particularly useful for creating functions or classes that work with collections of objects or other types where the type is not known until runtime.

For instance, you have some data coming from an API, where you could either get the data as string or number, based on that, you would need to do some calculations.

1// data coming from an API
2
3
4
5

Here's a breakdown of how generics work in TypeScript:

1. Generic Functions

You can create a function that works with any type by using a generic type parameter. This parameter acts as a placeholder for the actual type.

1function identity<T>(arg: T): T {
2  return arg;
3}
4
5let output1 = identity < string > "myString"; // type of output1 is string
6let output2 = identity < number > 42; // type of output2 is number
7

In this example, the function identity takes an argument of type T and returns a value of the same type. When you call the function, you can specify the type, or TypeScript can infer it.

2. Generic Interfaces

You can define interfaces that use generics to describe a variety of shapes and behaviors.

1interface GenericIdentityFn<T> {
2  (arg: T): T;
3}
4
5function identity<T>(arg: T): T {
6  return arg;
7}
8
9let myIdentity: GenericIdentityFn<number> = identity;
10

Here, the GenericIdentityFn interface describes a function that takes an argument of type T and returns a value of type T.

3. Generic Classes

Classes can also use generics to create flexible and reusable components.

1class GenericNumber<T> {
2  zeroValue: T;
3  add: (x: T, y: T) => T;
4}
5
6let myGenericNumber = new GenericNumber<number>();
7myGenericNumber.zeroValue = 0;
8myGenericNumber.add = function (x, y) {
9  return x + y;
10};
11

In this example, the GenericNumber class can work with any type, not just numbers. You can create instances of the class with different types.

4. Generic Constraints

Sometimes, you might want to restrict the types that can be used in your generics. You can achieve this using constraints.

1interface Lengthwise {
2  length: number;
3}
4
5function loggingIdentity<T extends Lengthwise>(arg: T): T {
6  console.log(arg.length);  // Now we know it has a .length property, so no error
7  return arg;
8}
9
10loggingIdentity({ length: 10, value: 3 });
11

In this example, the loggingIdentity function works only with types that have a length property. This is enforced by the extends Lengthwise constraint.

5. Default Type Parameters

You can specify default types for generic parameters.

1function createArray<T = string>(length: number, value: T): T[] {
2  return Array(length).fill(value);
3}
4
5let strings = createArray(3, "hello");  // ['hello', 'hello', 'hello']
6let numbers = createArray<number>(3, 5);  // [5, 5, 5]
7

In this example, the createArray function has a default type of string, so if no type is provided, it assumes the type is string.

Generics enhance the reusability and flexibility of your code, making it more robust and easier to maintain. They are a powerful feature of TypeScript that can significantly improve the quality of your codebase.

Share this article