TypeScript Generics: A Complete Guide

TL;DR: TypeScript Generics allow developers to write reusable code that can work with various data types while maintaining type safety. They are essential for building robust and scalable TypeScript apps.

To ensure the code is transparent and manageable, Typescript requires the safe and effective management of several kinds of data. One of Typescript’s core features is Typescript generics, which permits the creation of functions, classes, and interfaces while adhering to stringent type limitations. Generics allow you to write less code, make fewer mistakes, and, most importantly, build flexible components for different data types.

This article explores the essentials of typescript generics, including their usage in functions, classes, and interfaces, and demonstrates how they make code versatile and robust.

What are Typescript generics?

Typescript generics can define typescript code with placeholder types, allowing it to be flexible, extensible, and reusable while remaining type-safe.

Typescript makes type safety checks during compile time as a placeholder that defines a generic type. When the component is implemented, the actual type replaces the placeholder. This technique makes managing and decreasing duplicity easier because you don’t need distinct implementations for each data type.

Without generics, you would write multiple versions of a function or class to handle different data types, leading to code duplication. Generics allow for a single implementation that is reusable to various kinds while retaining static type checking.

The code examples in the next section will help you to understand this difference.

When to use Typescript generics?

Generics can be used across different parts of typescript to help manage types more efficiently. They’re instrumental in functions, interfaces, classes, and other structures where flexibility is critical.

1. Generic types in functions

Generics are often applied in functions to reduce redundancy. For example, consider a function that takes a string or a number as a parameter.

function identity(value: any): any {
  return value;
}
const result1 = identity(42); // result1: any
const result2 = identity("hello"); // result2: any

This function works fine. But it uses any type, which means the Typescript loses track of the specific type. As a result, the return value is typed as any, and Typescript can no longer enforce type safety. If we need to maintain type safety, we would have to write two different functions, with one returning a string while the other returns a number. However, that approach will increase code duplication.

We can improve the above function by using generics to preserve type information.

function identity<T>(value: Type): T {
  return value;
}
const result1 = identity<number>(42); // result1: number
const result2 = identity<string>("hello"); // result2: string

The T represents the type that the method uses in this case. If present, Typescript will confirm that the input type and the type in the return parameter are the same.

Also, we can define the function without explicitly defining the parameter type.

const result3 = identity(100); // result3: number
const result4 = identity("world"); // result4: string

In Typescript, you can use more than one generic type parameter when working with multiple types in a single function or component. For example, you might want a function that takes two different types of inputs and returns them as a pair.

function multipleParams<T, U>(first: T, second: U): [T, U] {
 return [first, second];
}
const result1 = multipleParams<string, number>("hello", 42); // result1: [string, number]
const result2 = multipleParams<string, number>("hello", "world"); // result2: gives a type error

In this case, the function returns a tuple with a first element of type T and a second element of type U. This enables type-safe handling of two distinct types by the function.

2. Default types in typescript

In Typescript, you can provide a default type for a generic, making it optional. If no type is provided, Typescript will use the default.

function createArray<T = string>(length: number, value: T): T[] {
 return Array(length).fill(value);
}

const stringArray = createArray(3, "hello"); // T defaults to string, so stringArray is a string array
const numberArray = createArray<number>(3, 42); // T is explicitly set to a number, so numberArray is a number array

In this example, the type parameter T defaults to string. If the developer doesn’t indicate a specific type when they call the function, T will be a string by default.

3. Generic interfaces

Typescript generics can also be applied to interfaces. Imagine you want to define a Box interface with a value of any type.

interface Box {
  value: any;
}
const numberBox: Box = { value: 123 }; // correct
const stringBox: Box = { value: "hello" }; // correct

This is more equal to the generic functions example; this code will also work without issues since we have not defined a specific type. But, because the value is typed as any, we may encounter type-related bugs.

To secure the type, we can define a generic interface here.

interface Box<Type> {
  value: Type;
}
const numberBox: Box<number> = { value: 123 }; // number
const stringBox: Box<string> = { value: "hello" }; // string
const stringBox2: Box<string> = { value: 123 }; // incorrect

The interface is generic, and its value type is strictly constrained to the Type variable. The Type variable can be specified as a number or string while creating an instance so that the Typescript ensures that appropriate types are adhered to.

4. Generic classes

Classes can also be written using generics to handle different types while maintaining type safety. Let’s create a Storage class that can store and retrieve values of any type.

class Storage {
  private data: any;
  setItem(item: any): void {
    this.data = item;
  }
  getItem(): any {
    return this.data;
  }
}
const storage = new Storage();
storage.setItem(123);
const item = storage.getItem();

This class works, but since data is of type any, the getItem method returns any, removing type safety. So, we can rewrite the class using generics to improve type safety.

class Storage<T> {
  private data: T;
  setItem(item: T): void {
    this.data = item;
  }
  getItem(): T {
    return this.data;
  }
}
const numberStorage = new Storage<number>();
numberStorage.setItem(123);
const item = numberStorage.getItem();

In this case, the type T is used by the Storage class. Typescript ensures that the data is correct when you define the type for them when you create an instance. The getItem method in this code example will yield a number.

5. Generic constraints

You can use generic constraints to restrict the types that a generic can accept, ensuring they have specific properties.

For example, if you have a function that needs to access the length property of an input, you can use a constraint to ensure that only types with a length property are allowed. This prevents Typescript from giving errors or letting incompatible types slip through.

function printLength<T>(value: T): void {
  console.log(value.length); // Error: Typescript doesn’t know if the value has length 
 } 

Here, value T is not defined with length property. To ignore the issue, we can add a constraint specifying that T must have a length property. We do this by saying T extends { length: number }.

function printLength<T extends { length: number}>(value: T): void {
  console.log(value.length); // Now Typescript knows length exists
}

printLength("hello"); // Output: 5
printLength([1, 2, 3]); // Output: 3
printLength({ length: 10 }); // Output: 10

Now, this function will have the length property; it will not give any errors and will execute with the length of the input.

Conclusion

Typescript generics allow you to write code that is flexible, recyclable, and type-safe. You can manage many data types without repeating code using classes, methods, and interfaces with these generics. Generic constraints, numerous types, and default types are some of the key use cases we looked at in this post and showed how each can improve the scalability and maintainability of programs.

Understanding Typescript generics can help you write more precise, adaptable, and type-safe code, making your Typescript applications more robust.

Related Blogs

• Webpack vs Vite: Which Bundler is Right for You?
• Build Micro Frontends with single-spa: A Guide
• Master Asynchronous JavaScript with RxJS
• Axios and Fetch API? Choosing the Right HTTP Client